Question

我有两个图表，第一个图表显示了衬衫销量的细分。其次是Blue Shirt和Blue Trouser销量的比较。

我想将Blue Shirt值从第一个图表导入到第二个图表。

以下是带有两个图表的代码：

var ctx = document.getElementById("myChart1").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
    label: 'Shirts',
    data: [10, 10, 15, 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
        }
    }]
},
}
});

var ctx = document.getElementById("myChart2").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Blue Shirts", "Blue Trousers"],
datasets: [{
    label: 'Sales',
    data: [10, 8],
    backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
     ],
    borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
    ],
    borderWidth: 1
}]
},
options: {
scales: {
    yAxes: [{
        ticks: {
            beginAtZero:true
        }
    }]
},
}
});

这是JSFiddle（https://jsfiddle.net/kingBethal/L8x790fn/15/）。

Answer 1

我发现此线程描述了如何从点击事件中获取数据：Click events on Pie Charts in Chart.js

我在这里做了一个新的提琴，它记录了一个图表对象，该对象包含单击图表时的图表数据：https://jsfiddle.net/btnL9d2a/16/

 myChart1Canvas.onclick = function(evt) {
   var activePoints = myChart.getElementsAtEvent(evt);
   if (activePoints[0]) {
   var chartData = activePoints[0]['_chart'].config.data;
   // `chartData` will be an object in the format {'Labels' : Array, 'datasets' : Array}.
   console.log(chartData);
 }
};

chartData.datasets[0].data是单击的图表数据的数组。

ChartJS：从另一个图表中获取价值

1 个答案: