关于 Chart.js v2 库下移动可用性的讨论,
我们可以在雷达图表中模拟那些“得分点”的点击事件吗? 我问这个是因为, 通过单击图表中的这些点以通过返回的索引触发外部交互,桌面 View 和平板电脑 View 对于“得分”导航来说看起来相当不错。
一个流行的例子是
$('#ChartV2').click(function(e) {
var activePoints = myRadarChart.getElementsAtEvent(e);
var firstPoint = activePoints[0];
console.log(firstPoint);
if (firstPoint !== undefined){
alert(firstPoint._index);
//so then we can use
// index to hide show results in the html elements out of canvas , etc
}
});
但是如果你查看移动 View ,
在responsive:true下,图表会通过自动调整大小而变小,
因此雷达图中的点对于移动点击来说可能非常小,
与标签一样,所有内容都会变得更小并且更难以点击。
是否可以自定义,让用户导航这些“得分点” (最初是通过手动点击 Canvas 触发的)
可以间接触发吗 外部“上一个”、“下一个”导航按钮 位于雷达图的左侧和右侧 例如那些 slider /轮播导航按钮?
最佳答案
您可以通过利用图表实例方法来做到这一点
<小时/>脚本
var myRadarChart = new Chart(ctx, {
...
(function (chart) {
var helpers = Chart.helpers;
var currentDatasetIndex;
var currentPointIndex;
$('#ChartV2').click(function (e) {
// try getting an element close to the click
var activePoints = chart.getElementAtEvent(e);
var firstPoint = activePoints[0];
if (firstPoint === undefined) {
// otherwise pick the first visible element
helpers.each(chart.data.datasets, function (dataset, datasetIndex) {
if (firstPoint === undefined && this.isDatasetVisible(datasetIndex)) {
var meta = this.getDatasetMeta(datasetIndex);
firstPoint = meta.data[0];
}
}, chart);
}
// need this check as we may have 0 visible elements
if (firstPoint !== undefined) {
currentDatasetIndex = firstPoint._datasetIndex;
currentPointIndex = firstPoint._index;
$('#prev, #next').removeAttr('disabled');
updateView();
}
});
$('#prev').click(function () {
// we add (n - 1) and do a modulo n to move one step back in an n element array.
if (currentPointIndex === 0)
currentDatasetIndex = (currentDatasetIndex + chart.data.datasets.length - 1) % chart.data.datasets.length;
currentPointIndex = (currentPointIndex + chart.data.labels.length - 1) % chart.data.labels.length;
updateView();
});
$('#next').click(function () {
currentPointIndex = (currentPointIndex + 1) % chart.data.labels.length;
if (currentPointIndex === 0)
currentDatasetIndex = (currentDatasetIndex + 1) % chart.data.datasets.length;
updateView();
});
// this (hoisted) function will update the text and show the tooltip
function updateView() {
$('#value').text(
chart.data.datasets[currentDatasetIndex].label + ' : ' +
chart.data.labels[currentPointIndex] + ' : ' +
chart.data.datasets[currentDatasetIndex].data[currentPointIndex]);
// we mess around with an internal variable here - this may not work with a new version
chart.tooltip._active = [ chart.getDatasetMeta(currentDatasetIndex).data[currentPointIndex] ];
chart.tooltip.update();
chart.render();
}
}(myRadarChart));
如果您只想在小屏幕上使用此功能,只需向上面的图表点击处理程序添加屏幕尺寸检查,并使用媒体查询隐藏按钮和标签。
<小时/>fiddle - http://jsfiddle.net/uxqL6rwf/
关于javascript - 如何通过单击 Chart.js v2 Canvas 外部的自定义按钮来导航工具提示弹出窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37059763/