点击图例使用默认 chartjs - Javascript

Chart.js是一个开源的用于绘制交互式图表的JavaScript库。其中涵盖了许多种不同的图表类型，并具有相当好的文档和示例。本文介绍如何使用chart.js的默认选项，在点击图例时实现将数据列隐藏或显示。

准备工作

首先需要在HTML中引入chart.js库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>

接下来，我们需要创建一个包含chart的canvas元素。需要注意的是，需要将canvas元素的宽度和高度设置为我们自己需要的数值，因为默认情况下canvas元素的宽度和高度都是0。

<canvas id="myChart" width="400" height="400"></canvas>

构建图表

下面是一个简单的chart.js示例，用于构建柱状图。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            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)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

通过上面的代码我们构建了一个包含6个柱状图的chart，并显示了每个柱状图的高度。

点击图例隐藏/显示数据列

要实现点击图例时隐藏或显示数据列，我们需要通过chart.js提供的回调函数进行操作。针对每个数据集的图例元素，chart.js会在默认情况下生成一个点击事件的回调。 我们需要通过options选项将该回调函数进行重写。

var myChart = new Chart(ctx, {
    // ... 其他配置如上
    options: {
        // options配置项中，添加对应的回调函数
        legend: {
            onClick: function(e, legendItem) {
                // 获取选中的dataset的Index
                var index = legendItem.datasetIndex;
                // 获取chart对象
                var chart = this.chart;
                // 获取所有已经渲染的dataset对象
                var meta = chart.getDatasetMeta(index);
                // 将对应的dataset进行隐藏/显示
                meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null;
                // 重新渲染chart
                chart.update();
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

通过上述代码，点击图例即可实现对应数据集的隐藏/显示操作。

总结

本文介绍了如何使用chart.js库构建图表并在点击图例时实现隐藏/显示数据列。chart.js作为一个非常流行的JavaScript库，其文档和示例都非常完善，我们可以在官方文档中查找更多的配置项和回调函数。如果需要更深入的学习，在线文档和社区中都有很多可供参考的资源。