[英]Chart.JS Format Labels For DataSets Differently
I am creating a combo chart with Chart.JS and it is a bar/line combo. 我正在使用Chart.JS创建一个组合图,它是一个条形/线形组合。 The labels for
dataset[0]
I want to show with a %
sign and the labels for dataset[1]
I want to show with a $
sign. 我想用
%
符号显示的dataset[0]
的标签和我想用$
符号显示的dataset[1]
的标签。 Now when I refer to labels I mean what displays when you hover over the bar/line and it displays the info. 现在,当我提到标签时,我的意思是当您将鼠标悬停在条形图上时,显示的内容及其信息。 I attempted the below syntax, but this will not even have a chart display (I altered my code to add an
if
statement to try to account for dataset[0]
& dataset[1]
) 我尝试了以下语法,但是甚至都没有图表显示(我更改了代码以添加
if
语句来尝试解决dataset[0]
和dataset[1]
)
What would be the proper way to have dataset[0]
show a %
sign and dataset[1]
show a $
sign? 使
dataset[0]
显示%
符号和dataset[1]
显示$
符号的正确方法是什么?
var labelsarr = ["Red 12", "Red 13", "Yellow 12", "Yellow 13", "Blue 12", "Blue 13"],
;
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labelsarr,
datasets: [{
type: 'line',
fill: false,
label: 'Percent',
backgroundColor: 'rgba(255,0,0,1)',
borderColor: 'rgba(255,0,0,1)',
data: [3, 4, 10, 5, 8, 7],
}, {}
data: [12, 19, 3, 5, 2, 3],
label: 'Total Revenue',
backgroundColor: 'rgba(0, 129, 214, 0.8)',
}]
},
options: {
tooltips: {
callbacks: {
if (chart.data.datasets = [1]) {
label: function(t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
if (chart.data.datasets = [0]) {
label: function(value) {
return value + "%"
}
}
}
}
},
legend: {
display: false,
position: 'top',
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}]
}
},
plugins: [{
beforeDraw: function(chart) {
var labels = chart.data.labels;
labels.forEach(function(e, i) {
var bar = chart.data.datasets[1]._meta[0].data[i]._model;
var dataPoint = e.split(/\s/)[1];
if (dataPoint === '12')
bar.backgroundColor = 'blue';
else if (dataPoint === '13')
bar.backgroundColor = 'orange';
});
}
}]
});
Use the following tooltips callback function : 使用以下工具提示回调函数:
callbacks: {
label: function(t, d) {
if (t.datasetIndex === 0) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel + '%';
return xLabel + ': ' + yLabel;
} else if (t.datasetIndex === 1) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ
var labelsarr = ["Red 12", "Red 13", "Yellow 12", "Yellow 13", "Blue 12", "Blue 13"]; var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: labelsarr, datasets: [{ type: 'line', fill: false, label: 'Percent', backgroundColor: 'rgba(255,0,0,1)', borderColor: 'rgba(255,0,0,1)', data: [3, 4, 10, 5, 8, 7], }, { data: [12, 19, 3, 5, 2, 3], label: 'Total Revenue', backgroundColor: 'rgba(0, 129, 214, 0.8)', }] }, options: { tooltips: { callbacks: { label: function(t, d) { if (t.datasetIndex === 0) { var xLabel = d.datasets[t.datasetIndex].label; var yLabel = t.yLabel + '%'; return xLabel + ': ' + yLabel; } else if (t.datasetIndex === 1) { var xLabel = d.datasets[t.datasetIndex].label; var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ",") : '$' + t.yLabel; return xLabel + ': ' + yLabel; } } } }, legend: { display: false, position: 'top', }, scales: { yAxes: [{ ticks: { beginAtZero: true, callback: function(value, index, values) { if (parseInt(value) >= 1000) { return '$' + value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); } else { return '$' + value; } } } }] } }, plugins: [{ beforeDraw: function(chart) { var labels = chart.data.labels; labels.forEach(function(e, i) { var bar = chart.data.datasets[1]._meta[0].data[i]._model; var dataPoint = e.split(/\\s/)[1]; if (dataPoint === '12') bar.backgroundColor = 'blue'; else if (dataPoint === '13') bar.backgroundColor = 'orange'; }); } }] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas id="myChart"></canvas>
some syntax issues have been fixed, look for those carefully. 一些语法问题已修复,请仔细查找。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.