Chart Js可点击栏

使用 Chart Js 可点击栏创建交互式图表

html
    
    
    
    

javascript
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['红色', '蓝色', '黄色', '绿色'],
        datasets: [{
            label: '颜色数量',
            data: [12, 19, 3, 5],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        },
        onClick: function(event, elements) {
            if (elements && elements.length > 0) {
                var index = elements[0].index;
                var label = myChart.data.labels[index];
                var value = myChart.data.datasets[0].data[index];
                console.log("您点击了" + label + "，数量为" + value);
            }
        }
    }
});