如何获得点击的条形图工具提示数据?

时间:2017-11-02 12:13:34

标签: javascript chart.js

我有一个条形图,只需点击任意一个条形,数据就会显示在工具提示中。我需要onClick函数中的工具提示数据。

以下是我的条形图代码:

var tool = new Chart(canvas, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            display: true,
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            },
            position : 'bottom'
        },
        title: {
            display: true,
            text: title 
        },
        scales: {
            xAxes: [{stacked: true,barPercentage: 5.0,
                categoryPercentage: 0.2}],
                yAxes: [{
                    stacked: true,
                    ticks: {
                        beginAtZero: true 
                    },
                    barPercentage: 0.3
                }]
        },
        events: [ "click"],
        onClick: function(event, array){

            console.log("tool.data:",tool.tooltip);

        }

    }
});

enter image description here

我想要点击功能中的数据,如“miss”,“medium”,78。

1 个答案:

答案 0 :(得分:2)

您可以使用以下 select "values" from "test_table" 功能获取工具提示数据:

select TO_NUMBER("values", '\u00A4') from "test_table"

另外,您需要将图表的 onClick 模式设置为onClick: function(event, element) { var activeElement = element[0]; var data = activeElement._chart.data; var barIndex = activeElement._index; var datasetIndex = activeElement._datasetIndex; var datasetLabel = data.datasets[datasetIndex].label; var xLabel = data.labels[barIndex]; var yLabel = data.datasets[datasetIndex].data[barIndex]; console.log(datasetLabel, xLabel, yLabel); } 才能使其正常运行:

hover

查看working example