时间戳

首页 > 解决方案 > ChartJS：从另一个图表中获取价值

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

问题描述

我有两张图表，第一张图表显示了衬衫销售的细分。其次是 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/ )。

标签： javascriptchart.js

解决方案

我发现这个线程描述了从点击事件中获取数据：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是点击图表数据的数组。

推荐阅读