chart.js 2.0将新属性添加到数据集

时间:2016-05-17 14:09:18

标签: javascript chart.js chart.js2

我需要在数据集/标签上添加一个属性,以便在点击时识别它。 我尝试过这样的事情:

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,有人可以帮助我处理它并展示如何扩展工作的例子吗? :)

由于

1 个答案:

答案 0 :(得分:0)

虽然您可以扩展图表来执行此操作,但如果您不介意依赖内部属性(可能在更高版本的chart.js中更改),则可以使用_datasetIndex和{{ 1}}属性从图表配置中检索您的额外属性,如此

_index

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

小提琴 - http://jsfiddle.net/55cdvb20/