由网友(向日葵的微笑只属于太阳)分享简介：我正在使用 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...

我正在使用 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);

点击饼图时更新条形图数据

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