javascript - Chart.js - 通过单击饼图段将数据添加到折线图
问题描述
我设置了 2 个图表 - 一个是带有 onClick 操作的饼图,另一个是空折线图。我目前正在使用随机数据来填充图表。我要做的是通过单击饼图段为折线图生成随机数据。我还尝试将饼图段的标签传递给折线图,以便生成的数据与单击的数据具有相同的标签。到目前为止,这是我的代码:
//Pie Chart
var ctx = document.getElementById("trackingPie2").getContext("2d");
var selectedIndex = null;
window.trackingPie2 = new Chart(ctx, {
type: "doughnut",
data: pieChartData2,
options: {
responsive:false,
maintainAspectRatio: false,
title: {
display: true,
text: ["Dataset1"]
},
legend: {
position: 'bottom'
},
onClick: function (evt, elements) {
if (elements && elements.length) {
var segment = elements[0];
trackingPie2.update();
if (selectedIndex !== segment["_index"]) {
selectedIndex = segment["_index"];
segment._model.outerRadius += 10;
}
else {
selectedIndex = null;
}
}
},
layout: {
padding: 0
}
}
});
//Line Chart
var config = {
type: "line",
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August'],
},
options: {
responsive:true,
maintainAspectRatio: true,
title: {
display: true,
text: 'Dataset 2'
},
legend: {
position: 'bottom'
}
}
};
var ctx = document.getElementById("linePieChart").getContext("2d");
window.linePieChart1 = new Chart(ctx, config);
var colorNames = Object.keys(window.chartColors);
document.getElementById('trackingPie2').onClick = function(evt) {
var activePoints = trackingPie2.getSegmentsAtEvent(evt);
if(Object.keys(activePoints).length > 0) {
var label = activePoints[0]['label'];
}
var colorName = colorNames[config.data.datasets.length % colorNames.length];
var newColor = window.chartColors[colorName];
var newDataset = {
label: label,
backgroundColor: newColor,
borderColor: newColor,
data: [],
fill: false
};
for (var index = 0; index < config.data.labels.length; ++index) {
newDataset.data.push(randomScalingFactor());
}
config.data.datasets.push(newDataset);
window.linePieChart1.update();
};
我单击饼图并没有任何反应,但我没有收到任何控制台错误。我似乎看不出问题出在哪里。
任何帮助深表感谢。
解决方案
我设法通过在饼图的单击功能中使用以下代码自己解决了这个问题:
var activePoints = window.trackingPie2.getElementsAtEventForMode(evt, 'point',
window.trackingPie1.options);
var firstPoint = activePoints[0];
var label = window.trackingPie2.data.labels[firstPoint._index];
我添加了“窗口”。调用饼图并使用“getElementsAtEventForMode”而不是“getElementAtEvent”来获取数据。
推荐阅读
- javascript - 在 Suitelet 中的桌子上选择时更改背景颜色
- sql - React Native 连接到 SQL 数据库
- c++ - 为什么我不能在 multimaps c++ 中使用 erase() 向迭代器添加文字值?
- r - 设置 select.list 弹出窗口的宽度
- javascript - 如何为 react-bootstrap Dropdown 打开状态自定义 css?
- html - 如何使地图适合显示表中的 div 框
- android - Admob 广告匹配率在 8 月突然下降
- jquery - 数据表 延迟加载数据。如何动态传递“deferLoading”值
- jmeter - 如何查看服务器对意外帧类型 (ping) 的响应
- reactjs - Jest SpyOn 选择正确的重载