Chart.jsv2ライブラリでのモバイルユーザビリティに関する議論
レーダーチャートのこれらの「スコアポイント」でクリックイベントをシミュレートできますか？デスクトップビューとタブレットビューは、チャート内のポイントをクリックして、返されたインデックスによって外部のインタラクティブ機能をトリガーすることで、「スコアポイント」ナビゲーションに非常に適しているように見えるためです。
人気のある例を見つけることができます
$('#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の下で、自動サイズ変更によってグラフがはるかに小さくなります。したがって、レーダーチャート内のポイントは
、ラベルと同様に、モバイルクリックでは非常に小さくなり、すべてが小さくなり、クリックしにくくなります。
ユーザーがそれらの「スコアポイント」をナビゲートできるようにカスタマイズできますか（最初は手動でキャンバスをクリックすることによってトリガーされます）
スライダー/カルーセルナビゲーションボタンなど、レーダーチャートの左側と右側にある外部の「前」、「次」のナビゲーションボタンによって間接的にトリガーできますか？
これは、チャートインスタンスメソッドを利用して行うことができます
脚本
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));
小さな画面でのみこの機能が必要な場合は、上記のグラフクリックハンドラーに画面サイズのチェックを追加し、メディアクエリを使用してボタンとラベルを非表示にします。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加