如何解决Chart.js特定标签旁边的点
我正在尝试让chartjs在每个点旁边显示一个特定的标签,例如,在此脚本中,它应该在标签以及鼠标悬停时显示“ TRALALA”,但它显示坐标。 如何改为使用特定标签?
https://jsfiddle.net/z0eLygwx/
谢谢
var valuedata = [{
x: 3,y: 5
}];
var valuelabel = ['TRALALA'];
var chartData = {
labels: valuelabel,datasets: [{
label: 'Distance',borderColor: '#2196f3',// Add custom color border
backgroundColor: '#2196f3',// Add custom color background (Points and Fill)
data: valuedata,pointRadius: 10,pointHoverRadius: 12
}]
};
var myBarChart = new Chart(document.getElementById("myChart1"),{
type: 'scatter',data: {
labels: valuelabel,datasets: [{
label: 'Distance',// Add custom color border
backgroundColor: '#2196f3',// Add custom color background (Points and Fill)
data: valuedata,pointHoverRadius: 12
}]
},options: {
legend: {
display: true
},title: {
display: true,text: 'Distance of JDPT kanji compared to the equivalent JLPT level'
},scales: {
yAxes: [{
type: 'logarithmic',display: true,scaleLabel: {
display: true,labelString: 'Count',fontSize: 16
}
}],xAxes: [{
type: 'linear',position: 'bottom',labelString: 'Distance',fontSize: 16
},gridLines: {
display: true
}
}]
},plugins: {
datalabels: {
color: '#d6621e',align: 'right',offset: 16,font: {
weight: 'bold'
}
}
}
}
});
myBarChart.update();
解决方法
好吧,我明白了
formatter: function(value,context) {
context.chart.data.labels[context.dataIndex];
}
例如
var myBarChart = new Chart(document.getElementById("bar-chart"),{
type: 'line',data: {
labels: ['a','b'],datasets: [{
data: [10,20]
}]
},options: {
plugins: {
datalabels: {
formatter: function(value,context) {
return context.chart.data.labels[context.dataIndex];
}
}
}
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。