Question

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

Answer 1

由于这是一个Chart.js问题:-)，这就是你如何做的Chart.js（并且它也不是太复杂）

设置饼图

// 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);

点击饼图

时更新条形码数据

// 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();
};

单击饼图外部（但饼图画布中的）会重置条形图。

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

Answer 2

使用dc.js：https://dc-js.github.io/dc.js/

它具有所要求的功能。

有没有办法过滤Chart.js中的数据？

2 个答案: