如何使用react-chartjs-2自定义图例

bwntbbo3 于 2022-11-07 发布在 Chart.js

关注(0)|答案(1)|浏览(274)

我尝试在chartjs v3.3.0中创建一个自定义图例模板，如下图所示。我似乎找不到v3.3.0中关于此选项的任何文档。它现在还可用吗？有人能给出一个如何完成此操作的示例吗？
以下是我的设置：

plugins: {
    legend: {
      display: true,
      onClick: () => {
        console.log('do nothing');
      },
      position: 'bottom',
      labels: {
        usePointStyle: true,
        pointStyle: 'circle',
        // generateLabels: (chart) => {
        //   console.log(chart.legend);
        //   return [1, 2];
        // },
      },
    },
    title: {
      text: 'Gender',
      display: true,
    },
  },
},
type: 'doughnut',
data: {
  labels: defaultColors,
  datasets: [
    {
      label: 'label1',
      data: [1, 2],
      backgroundColor: getBackground,
      borderWidth: 0,
    },
  ],
},
width: 'auto',
height: '100%',

Sample Image

chart.js

来源：https://stackoverflow.com/questions/70094731/how-to-custom-legend-with-react-chartjs-2

1条答案

按热度按时间

i1icjdpr1#

如果要呈现自定义图例，则需要使用htmlLegend。
您可以在饼图插件（如代码所示）或Chartjs 3x文档中所示的图表配置中定义插件本身。

htmlLegendPlugin = {
id: "htmlLegend",
afterUpdate(chart) {
  const items = chart.options.plugins.legend.labels.generateLabels(chart);
  const ul = document.createElement("ul");
 items.forEach(item => {
    const li = document.createElement("li");
    const boxSpan = document.createElement("span");
    boxSpan.style.background = item.fillStyle;
    li.appendChild(boxSpan);
    li.appendChild(document.createTextNode(item.text));
    ul.appendChild(li);
  });
  const jsLegend = document.getElementById("js-legend");
  jsLegend.appendChild(ul);
}

};

<Pie
      data={data}
      options={option}
      height={400}
      redraw={true}
      plugins={[this.htmlLegendPlugin]}
    />
 <div id='js-legend' className='whatever you wanna add'></div>

通过这种方式，你可以添加自定义的CSS也到你的图例。
另外，这是使用React-chartjs-2。

赞(0）回复(0）举报 2022-11-07

我来回答

如何使用react-chartjs-2自定义图例

1条答案

相关问题

热门标签

最新问答