无法在 React 的 chartjs 中将图例符号更改为圆角正方形

Question

我正在使用以下代码创建一个 DoughnutChart：-

<Doughnut
        data={this.props.chartdataSet}
        options={{
          title: {
            display: false,
            text: [this.props.title,'Eligible Amount : 0'],
            fontSize: 18,
            fontFamily:'Arial',
            lineHeight:1.5
          },
          tooltips:{
            enabled:false
          },
          legend: {
            display: true,
            position: "bottom",
            align:'start',
            reverse:true,
            labels :{
              padding:10,
              boxWidth:12,
              fontSize:13
            },
          },
        }}
        height={200}

      />

现在我的图表是这样的：-

现在我想要那些角部带有圆角正方形的方形图标，我使用的是 usePointStyle 但它制作成圆形我可以在制作圆角图标时获得帮助

Answer 1

您可以禁用标准图例并生成您自己的 HTML 图例。

componentDidMount() {
  this.generateLegend(document.getElementById("legend"), this.refs.chart.chartInstance);
}

generateLegend(div, chart) {
  let ul = document.createElement("ul");
  chart.data.labels.forEach((l, i) => {
    let ds = chart.data.datasets[0];
    let bgColor = ds.backgroundColor[i];
    let border = ds.borderWidth + "px solid " + ds.borderColor[i];

    let li = document.createElement("li");
    let symbolSpan = document.createElement("span");
    symbolSpan.style.cssText = "width: 6px; height: 14px; background-color:" + bgColor + "; border:" + border + ";";
    li.appendChild(symbolSpan);

    let labelSpan = document.createElement("span");
    labelSpan.innerHTML = l;

    symbolSpan.onclick = function() {
      let hidden = !chart.getDatasetMeta(0).data[i].hidden;
      chart.getDatasetMeta(0).data[i].hidden = hidden;
      labelSpan.style.textDecoration = hidden ? "line-through" : "";
      chart.update();
    };
    labelSpan.onclick = function() {
      let hidden = !chart.getDatasetMeta(0).data[i].hidden;
      chart.getDatasetMeta(0).data[i].hidden = hidden;
      labelSpan.style.textDecoration = hidden ? "line-through" : "";
      chart.update();
    };

    li.appendChild(labelSpan);
    ul.appendChild(li);
  });
  div.appendChild(ul);
}

请看看这个 StackBlitz 看看它是如何工作的。

无法在 React 的 chartjs 中将图例符号更改为圆角正方形

Unable to change the legend symbol to rounded square in chartjs in React

javascript

icons

responsive-design

reactjs

chart.js