在Chart.js v2库下讨论移动可用性,
我们可以在RadarChart中的那些“得分”上模拟点击事件吗?我之所以这样问是因为,通过单击Chart中的那些点以通过返回的索引触发外部交互,“得分点”导航的桌面视图和平板电脑视图看起来还可以。
一个受欢迎的例子是
$('#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
}
});
但是,如果您查看移动视图,则在response:true下,通过自动调整大小,图表将变得更小,因此,雷达图内的点对于移动点击而言可能非常小,
与标签相同,所有内容都会变得更小且难以点击。
是否可以自定义让用户浏览这些“得分”(最初是通过手动单击画布触发的)
是否可以通过Radarchart左侧和右侧的外部“上一个”,“下一个”导航按钮(例如那些滑块/转盘导航按钮)间接触发?
您可以通过使用图表实例方法来完成此操作
脚本
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));
如果您只想在小屏幕上使用此功能,只需在上述图表单击处理程序中添加屏幕尺寸检查,然后使用媒体查询隐藏按钮和标签。
小提琴-http: //jsfiddle.net/uxqL6rwf/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句