美好的一天 - 我有一个我在我的页面上显示的图表,它显示完美,我只需要对它进行两次小的自定义,对于我的生活,每当我进行语法更改图表时没有更长的显示。我想要
1)从右侧移除百分比
2)在折线图上,“悬停值”显示为数字而不是百分比
这是我目前的语法 - 应如何编辑以适应这些更改?
<script>
var labelsarr = ["Jan 15", "Feb 15", "Mar 15", "Apr 15", "May 15", "Jun 15", "Jul 15", "Aug 15", "Sep 15", "Oct 15", "Nov 15", "Dec 15"];
var ctx = document.getElementById('canvasOfTestPortion').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: labelsarr,
datasets: [{
type: 'line',
fill: false,
label: 'Metric 1',
backgroundColor: 'rgba(255,0,0,1)',
borderColor: 'rgba(255,0,0,1)',
data: val1,
yAxisID: 'y-axis-1'
}, {
label: 'Metric 2,
backgroundColor: 'rgba(0, 129, 214, 0.8)',
data: val2
}]
},
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 {
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;
}
}
}
}, {
id: 'y-axis-1',
position: 'right',
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
return value + '%';
}
}
}]
}
}
});
</script>
答案 0 :(得分:1)
从右侧删除百分比
从第一个数据集中删除yAxisID: 'y-axis-1'
,以及从yAxes
数组中删除第二个对象。
{
id: 'y-axis-1',
position: 'right',
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value + '%';
}
}
}
在折线图上,“悬停值”显示为数字而不是百分比
替换这行代码(在工具提示标签回调中):
return xLabel + ': ' + yLabel + '%';
以下内容:
return xLabel + ': ' + yLabel;
ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇᴀᴍᴘʟᴇ
var labelsarr = ["Jan 15", "Feb 15", "Mar 15", "Apr 15", "May 15", "Jun 15", "Jul 15", "Aug 15", "Sep 15", "Oct 15", "Nov 15", "Dec 15"];
var ctx = document.getElementById('canvasOfTestPortion').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar'], //labelsarr,
datasets: [{
type: 'line',
fill: false,
label: 'Metric 1',
backgroundColor: 'rgba(255,0,0,1)',
borderColor: 'rgba(255,0,0,1)',
data: [3, 2, 4], //val1
}, {
label: 'Metric 2',
backgroundColor: 'rgba(0, 129, 214, 0.8)',
data: [50, 30, 40], //val2
}]
},
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 {
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;
}
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="canvasOfTestPortion"></canvas>