chart.js 2.0为数据集添加了新属性

chart.js 2.0 add new property to dataset

本文关键字：新属性 属性 添加 js 数据集 chart      更新时间：2023-09-26

我需要向数据集/标签添加一个属性，以便在单击时识别它。我试过这样的东西：

Chart.controllers.customBar = Chart.controllers.bar.extend({
        code: null
    });

它几乎可以工作，因为我可以看到新的属性"代码"，数据与之相关，图表背景可见但为空，我的意思是数据集中没有可见的数据。

这是我的初始化：

var ctx = document.getElementById("roads-chart").getContext("2d");
    window.roadsBar = new Chart(ctx, {
        type: 'bar',
        data: roadsChartData,
        options: {
            title: {
                display: true,
                text: "Stan dróg"
            },
            tooltips: {
                mode: 'label'
            },
            responsive: true,
            scales: {
                xAxes: [{
                        stacked: true,
                    }],
                yAxes: [{
                        stacked: true
                    }]
            },
            onClick: function(e, d) {
                console.log(d);
            }
        }
    });

问题是，我感觉不到Chart.js，有人能帮我处理它并展示一个扩展如何工作的例子吗？：）

感谢

虽然您可以扩展图表来实现这一点，但如果您不介意依赖内部属性（在chart.js的后续版本中可能会发生变化），您可以使用_datasetIndex和_index属性从图表配置中检索额外的属性，如

  options: {
    onClick: function(e, d) {
      if (d.length > 0) {
        console.log(this.config.data.datasets[d[0]._datasetIndex].code[d[0]._index]);
      }
    }
    ...

和

  ...
  datasets: [{
    code: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
    ...

Fiddle-http://jsfiddle.net/55cdvb20/

相关文章：