堆叠条形图上的单击事件 - ChartJs
Click event on stacked bar chart - ChartJs
我正在尝试在堆积条形图上实现点击事件。
数据如下所示:
var chartData = {
type: 'horizontalBar',
data: {
labels: ['A0224', 'A3681', 'A3984', 'A4101', 'A4150', 'B0682', 'Others'],
datasets: [
{
label: "P1",
backgroundColor: '#cc3399',
data: [6, 7, 6, 8, 6, 10, 3]
},
{
label: "P2",
backgroundColor: '#0099ff',
data: [8, 9, 5, 8, 6, 10, 3]
},
{
label: "P3",
backgroundColor: '#0022ff',
data: [6, 7, 6, 8, 6, 10, 3]
}
]
},
options: {
legend: { display: false },
scales: {
yAxes: [{
stacked: true
}],
xAxes: [{
stacked: true
}]
},
}
}
点击事件和图表创建方法如下:
var myChart = new
Chart(document.getElementById("createCurrYearHccGapChart"),
chartData);
var canvas = document.getElementById('createCurrYearHccGapChart');
canvas.onclick = function (evt) {
var activePoints = myChart.getElementsAtEvent(evt);
var cdata = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = cdata.datasets[idx].label;
var value = cdata.datasets[0].data[idx];
};
图表如下所示:
以下是我在任何位置单击单个条形图所获得的值:
第 1 条 - 标签 = P1,值 = 6
第 2 条 - 标签 = P2,值 = 7
第 3 条 - 标签 = P3,值 = 6 等等...
问题:
因此,无论我点击第 1 个栏,标签都是 P1,因为我得到的索引值为整个栏的 0,第 2 栏的索引值为 1,依此类推。
问题:
有什么方法可以识别x坐标值吗?这样我就可以确定点击来自哪个堆栈。
您可以使用图表的以下 on-click 事件处理程序来完成此操作...
canvas.onclick = function(evt) {
var activePoint = myChart.getElementAtEvent(evt)[0];
var data = activePoint._chart.data;
var datasetIndex = activePoint._datasetIndex;
var label = data.datasets[datasetIndex].label;
var value = data.datasets[datasetIndex].data[activePoint._index];
};
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ⧩
var chartData = {
type: 'horizontalBar',
data: {
labels: ['A0224', 'A3681', 'A3984', 'A4101', 'A4150', 'B0682', 'Others'],
datasets: [{
label: "P1",
backgroundColor: '#cc3399',
data: [6, 7, 6, 8, 6, 10, 3]
}, {
label: "P2",
backgroundColor: '#0099ff',
data: [8, 9, 5, 8, 6, 10, 3]
}, {
label: "P3",
backgroundColor: '#0022ff',
data: [6, 7, 6, 8, 6, 10, 3]
}]
},
options: {
responsive: false,
legend: {
display: false
},
scales: {
yAxes: [{
stacked: true
}],
xAxes: [{
stacked: true
}]
},
}
}
var canvas = document.getElementById('createCurrYearHccGapChart');
var myChart = new Chart(canvas, chartData);
canvas.onclick = function(evt) {
var activePoint = myChart.getElementAtEvent(evt)[0];
var data = activePoint._chart.data;
var datasetIndex = activePoint._datasetIndex;
var label = data.datasets[datasetIndex].label;
var value = data.datasets[datasetIndex].data[activePoint._index];
console.log(label, value);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="createCurrYearHccGapChart" height="170"></canvas>
在 Chart.js 的新版本中,下面的代码可以工作。
const ctx = $('#monitor');
monitorChart = new Chart(ctx, config);
ctx.on('click', function(evt) {
const points = monitorChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
if (points.length) {
const firstPoint = points[0];
const label = monitorChart.data.labels[firstPoint.index];
const slabel = monitorChart.data.datasets[firstPoint.datasetIndex].label;
const value = monitorChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
console.log(label, slabel, value);
}
});
您可以查看 Here!
我正在尝试在堆积条形图上实现点击事件。
数据如下所示:
var chartData = {
type: 'horizontalBar',
data: {
labels: ['A0224', 'A3681', 'A3984', 'A4101', 'A4150', 'B0682', 'Others'],
datasets: [
{
label: "P1",
backgroundColor: '#cc3399',
data: [6, 7, 6, 8, 6, 10, 3]
},
{
label: "P2",
backgroundColor: '#0099ff',
data: [8, 9, 5, 8, 6, 10, 3]
},
{
label: "P3",
backgroundColor: '#0022ff',
data: [6, 7, 6, 8, 6, 10, 3]
}
]
},
options: {
legend: { display: false },
scales: {
yAxes: [{
stacked: true
}],
xAxes: [{
stacked: true
}]
},
}
}
点击事件和图表创建方法如下:
var myChart = new
Chart(document.getElementById("createCurrYearHccGapChart"),
chartData);
var canvas = document.getElementById('createCurrYearHccGapChart');
canvas.onclick = function (evt) {
var activePoints = myChart.getElementsAtEvent(evt);
var cdata = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = cdata.datasets[idx].label;
var value = cdata.datasets[0].data[idx];
};
图表如下所示:
以下是我在任何位置单击单个条形图所获得的值:
第 1 条 - 标签 = P1,值 = 6
第 2 条 - 标签 = P2,值 = 7
第 3 条 - 标签 = P3,值 = 6 等等...
问题:
因此,无论我点击第 1 个栏,标签都是 P1,因为我得到的索引值为整个栏的 0,第 2 栏的索引值为 1,依此类推。
问题:
有什么方法可以识别x坐标值吗?这样我就可以确定点击来自哪个堆栈。
您可以使用图表的以下 on-click 事件处理程序来完成此操作...
canvas.onclick = function(evt) {
var activePoint = myChart.getElementAtEvent(evt)[0];
var data = activePoint._chart.data;
var datasetIndex = activePoint._datasetIndex;
var label = data.datasets[datasetIndex].label;
var value = data.datasets[datasetIndex].data[activePoint._index];
};
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ⧩
var chartData = {
type: 'horizontalBar',
data: {
labels: ['A0224', 'A3681', 'A3984', 'A4101', 'A4150', 'B0682', 'Others'],
datasets: [{
label: "P1",
backgroundColor: '#cc3399',
data: [6, 7, 6, 8, 6, 10, 3]
}, {
label: "P2",
backgroundColor: '#0099ff',
data: [8, 9, 5, 8, 6, 10, 3]
}, {
label: "P3",
backgroundColor: '#0022ff',
data: [6, 7, 6, 8, 6, 10, 3]
}]
},
options: {
responsive: false,
legend: {
display: false
},
scales: {
yAxes: [{
stacked: true
}],
xAxes: [{
stacked: true
}]
},
}
}
var canvas = document.getElementById('createCurrYearHccGapChart');
var myChart = new Chart(canvas, chartData);
canvas.onclick = function(evt) {
var activePoint = myChart.getElementAtEvent(evt)[0];
var data = activePoint._chart.data;
var datasetIndex = activePoint._datasetIndex;
var label = data.datasets[datasetIndex].label;
var value = data.datasets[datasetIndex].data[activePoint._index];
console.log(label, value);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="createCurrYearHccGapChart" height="170"></canvas>
在 Chart.js 的新版本中,下面的代码可以工作。
const ctx = $('#monitor');
monitorChart = new Chart(ctx, config);
ctx.on('click', function(evt) {
const points = monitorChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
if (points.length) {
const firstPoint = points[0];
const label = monitorChart.data.labels[firstPoint.index];
const slabel = monitorChart.data.datasets[firstPoint.datasetIndex].label;
const value = monitorChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
console.log(label, slabel, value);
}
});
您可以查看 Here!