我拼凑了一个图表 js 散点图 - 效果很好。
在这个 js 的底部,我有一个函数可以获取点击点的标签,以便我可以用它做一些事情 - 这工作正常。
我不能做的是让这个标签在用户悬停在该点上时显示 - 我只是获得数据点的 x 和 y 值。
我希望在用户悬停时显示相关标签。理想情况下,我不希望 x 和 y 值。
我怎么做?
谢谢,
<script>var data = {
datasets: [{
backgroundColor: "#566573",
{{scatterData|safe}}
}],
{{labelsData|safe}}
};
$(document).ready(
function () {
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var myNewChart = new Chart(ctx, {
type: 'bubble',
data: data,
options : {
legend: {
display: false
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Page Value'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Unique Page Views'
}
}] }
}
});
canvas.onclick = function (evt) {
var activePoints = myNewChart.getElementsAtEvent(evt);
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = chartData.labels[idx];
var value = chartData.datasets[0].data[idx];
loadScatterPoint(label);
};
}
);
</script>
无需click
为您的图表使用事件处理程序。
要在工具提示上显示标签,您必须label
为数据集定义属性,如下所示...
var data = {
datasets: [{
label: 'Ben Mayo', //<-- define this
backgroundColor: "#566573",
{ { scatterData | safe } }
}],
{ { labelsData | safe } }
};
note: labels
array are not applicable for bubble chart.
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句