0
私はChart.JSでコンボチャートを作成していますが、これはバー/ラインコンボです。 dataset[0]
のラベル%
の標識とdataset[1]
のラベルを表示したいのですが、$
と表示したいです。今私がラベルを参照するとき、あなたがバー/ラインの上にマウスを置いたときに表示され、情報を表示することを意味します。私は、以下の構文を試みたが、これもチャート表示を持っていませんChart.JS DataSetsの書式設定のラベルが異なる
dataset[0]
を持って適切な方法をどのようになるか%
を示した(私はdataset[0]
& dataset[1]
を説明するためにしようとするif
ステートメントを追加するために私のコードを変更しました)記号と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';
});
}
}]
});