Chart.js圆环图分享过滤条形图

时间:2018-01-18 10:14:03

标签: javascript jquery charts chart.js

我想让甜甜圈图表过滤器影响条形图值,想象一下,我在条形图中的值与我对圆环图有相同的值,当我点击禁用饼图中我想要的值时它可以在条形图中禁用相同的值。

这是我对圆环图的代码:

new Chart(document.getElementById("pieChartt"), {
                    type: 'doughnut',
                    data: {
                        labels: ['Test 1', 'Test 2', 'Test 3'],
                        datasets: [
                          {
                              label: "Example",
                              backgroundColor: ["#F2C15A", "#F58557", "#F55B51", "#286278", "#004250", "#3D6272", "#ACD7DD"],
                              data: [300, 200, 600, 100, 478, 145, 354, 123]
                          }
                        ]
                    },
                    options: {
                        tooltips: {
                            callbacks: {
                                label: function (tooltipItem, data) {
                                    var allData = data.datasets[tooltipItem.datasetIndex].data;
                                    var tooltipLabel = data.labels[tooltipItem.index];
                                    var tooltipData = allData[tooltipItem.index];
                                    var total = 0;
                                    for (var i in allData) {
                                        total += allData[i];
                                    }
                                    var tooltipPercentage = Math.round((tooltipData / total) * 100);
                                    return tooltipLabel + ': ' + tooltipData + ' (' + tooltipPercentage + '%)';
                                }
                            }
                        }
                    }
                });

这是我的条形图的代码:

var myBarChart = new Chart(barChartCanvas, {
                    type: 'bar',
                    data: areaChartData,
                    options: {
                        legend: {
                            display: true,
                            position: 'bottom',
                            labels: {
                                fontColor: "#000080",
                            }
                        },
                        tooltips: {
                            mode: 'index'
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: "Test Label",
                                    fontColor: "black"
                                }
                            }]
                        }
                    }
                });

所以,我想要的是,当我点击圆环图中"Test 1"的标签时,它会影响条形图中的相同值。 有可能吗?

0 个答案:

没有答案