有没有一种方法可以过滤Chart.js中的数据？ [英] Is there a way to filter data in Chart.js?

问题描述

我正在使用Chart.js，想知道是否有办法在单击饼图的一部分时过滤条形图。

I'm working with Chart.js and I'm wondering if there's a way when you click on part of a pie chart, it filters the bar chart.

推荐答案

由于这是Chart.js的问题:-)，因此，这就是Chart.js的处理方式（也不太复杂）

Since this is a Chart.js question :-), this is how you do it Chart.js (and it's not too complex either)

设置饼图

// pie
var data = [
    {
        value: 300,
        color: "#F7464A",
        highlight: "#FF5A5E",
        label: "Red",
        subData: [28, 48, 40, 19, 86, 27, 190]
    }, {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green",
        subData: [90, 28, 48, 40, 19, 86, 127]
    }, {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow",
        subData: [28, 48, 40, 19, 86, 27, 190]
    }
]

var canvas = document.getElementById("chart");
var ctx = canvas.getContext("2d");
var myPieChart = new Chart(ctx).Pie(data);

使用饼状数据设置条形图

// bar using pie's sub data
var bardata = {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    datasets: [
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: data[0].subData.map(function (point, i) {
                var pointTotal = 0;
                data.forEach(function (point) {
                    pointTotal += point.subData[i]
                })
                return pointTotal;
            })
        }
    ]
};

var subcanvas = document.getElementById("subchart")
var subctx = subcanvas.getContext("2d");
var myBarChart = new Chart(subctx).Bar(bardata);

单击Pie时更新条形数据

// connect them both
canvas.onclick = function (evt) {
    var activeSector = myPieChart.getSegmentsAtEvent(evt);

    myBarChart.datasets[0].bars.forEach(function (bar, i) {
        var pointTotal = 0;
        data.forEach(function (point, j) {
            if (activeSector.length === 0 || point.label === activeSector[0].label)
                pointTotal += data[j].subData[i]
        })

        bar.value = pointTotal;
    });

    myBarChart.update();
};

在饼图之外单击（但在饼图的画布中为 ）会重置

Clicking outside the pie (but in the pie chart's canvas) resets the bar chart.

小提琴- http://jsfiddle.net/0zwkjv8a/

这篇关于有没有一种方法可以过滤Chart.js中的数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！