更改Chart.js图例文本

Question

[我正在尝试查看Chart.js是否可以将图例文本从其默认值“ right”更改为“ left”。我还需要能够将两种类型的数据放在usePointStyle的两侧。我目前正在使用ReactJS。

这是我目前拥有的：

我需要Chart.js来显示图例文本：

我尝试在chart.js上查找整个文档，但空手而归。

这是我的代码段：

<Doughnut
      width={120}
      height={100} 
      data={tradeFileNames}
      options={{
        cutoutPercentage: 55,
        elements: {
          center: {
            text: `${numeral(total).format("0,0")} ${innerTopText} ${innerMiddleText} ${innerBottomText}`,
            fontColor: "#666666",
            fontFamily: "Allianz-Neo",
            fontStyle: "bold",
            minFontSize: 15,
            maxFontSize: 20
          }
        },
        plugins: {
          outlabels: {
            backgroundColor: "white", // Background color of Label
            borderColor: "none", // Border color of Label
            borderRadius: 0, // Border radius of Label
            borderWidth: 0, // Thickness of border
            color: "black", // Font color
            display: false,
            lineWidth: 1, // Thickness of line between chart arc and Label
            padding: 0,
            lineColor: "black",
            textAlign: "center",
            stretch: 45,
          },
          labels: false
        },
        legend: {
          display: true,
          position: "right",
          align: "center",
          fontFamily: "Allianz-Neo",
          textDirection: 'ltr',
            labels: {
              usePointStyle: true,
              fontColor: "#006192",
            }
        }
      }}
      />

Answer 1

我相信您需要在legendCallback中添加一个options-参见此处的HTML图例部分：

https://www.chartjs.org/docs/latest/configuration/legend.html

• 上方：您可以随意渲染几乎任何东西
• 缺点：您将需要通过自己调用generateLegend来生成图例

这里有一个解决方案，您可以尝试：https://github.com/jerairrest/react-chartjs-2/issues/81

如果应用您的代码，您将看起来像这样：

<>
   <Doughnut
      ref="chart"
      width={120}
      height={100} 
      data={tradeFileNames}
      options={{
        cutoutPercentage: 55,
        elements: {
          center: {
            text: `${numeral(total).format("0,0")} ${innerTopText} ${innerMiddleText} ${innerBottomText}`,
            fontColor: "#666666",
            fontFamily: "Allianz-Neo",
            fontStyle: "bold",
            minFontSize: 15,
            maxFontSize: 20
          }
        },
        plugins: {
          outlabels: {
            backgroundColor: "white", // Background color of Label
            borderColor: "none", // Border color of Label
            borderRadius: 0, // Border radius of Label
            borderWidth: 0, // Thickness of border
            color: "black", // Font color
            display: false,
            lineWidth: 1, // Thickness of line between chart arc and Label
            padding: 0,
            lineColor: "black",
            textAlign: "center",
            stretch: 45,
          },
          labels: false
        },
        legendCallback: (chart) => {
          // return whatever you need here based on chart.data 
        },
        legend: {
          display: true,
          position: "right",
          align: "center",
          fontFamily: "Allianz-Neo",
          textDirection: 'ltr',
            labels: {
              usePointStyle: true,
              fontColor: "#006192",
            }
        }
      }}
      />
      {this.refs.chart && this.refs.chart.chartInstance.generateLegend()}
</>