如何在ChartJs的Y轴中使用不同的比例?
我有以下数据集:
[ 1450478,2645844,1840524,640057,1145844,1530500,1695844,1778654,1450478,1645844,1450478,1645844 ]
[ 3.14, 4.15, 3.09, 3.48, 4.05, 3.99, 4.39, 4.15, 4.10, 3.98, 3.54, 3.50 ]
https://jsfiddle.net/psycocandy/ad18Lc4u/18/
该行表示的最小比例显然非常接近0的比例。如何使同一行可见而不必通过图例进行过滤?
答案 0 :(得分:0)
我发现了问题,更新了小提琴:https://jsfiddle.net/psycocandy/fwncq25a/14/
要使用yAxes在数据集中设置对应的ID,正确的方法是使用yAxisID
:
var chartData = [
[1450478, 2645844, 1840524, 640057, 1145844, 1530500, 1695844, 1778654, 1450478, 1645844, 1450478, 1645844],
[3.14, 4.15, 3.09, 3.48, 4.05, 3.99, 4.39, 4.15, 4.10, 3.98, 3.54, 3.50]
];
var dataSet = {
labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
],
datasets: [{
type: 'line',
label: 'Preço Médio Mensal',
yAxisID: 'y-axis-0',
borderColor: '#17522f',
fill: false,
backgroundColor: '#17522f',
borderWidth: 3,
radius: 4,
hoverBorderWidth: 4,
rotate: 90,
data: chartData[1],
datalabels: {
display: true,
align: 'end',
anchor: 'end',
rotation: -90,
clamp: true,
clip: true,
color: '#17522f',
padding: 10,
formatter: function (value, context) {
return numeral(value).format('0,0.00');
},
font: {
weight: 'bold',
}
}
},{
type: 'bar',
label: 'Total Mensal',
yAxisID: 'y-axis-1',
backgroundColor: '#7579ef',
borderColor: '#171951',
borderWidth: 2,
data: chartData[0],
datalabels: {
display: true,
clamp: true,
anchor: 'start',
align: 'end',
offset: 10,
rotation: -90,
color: '#171951',
formatter: function (value, context) {
return numeral(value).format('0,0');
},
font: {
weight: 'bold',
}
}
}]
};
var chart = new Chart(document.getElementById('myChart'), {
type: 'bar',
data: dataSet,
options: {
title: {
display: false
},
tooltips: {
mode: 'label',
callbacks: {
label: function(tooltipItem, data) {
var value = parseFloat(tooltipItem.value);
var formatedValue;
if(tooltipItem.datasetIndex > 0){
formatedValue = numeral(value).format('$ 0,0.00');
}else{
formatedValue = numeral(value).format('$ 0,0.00');
}
return ' ' + formatedValue;
},
}
},
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
position: 'left',
type: 'linear',
scaleLabel: {
display: true,
},
id: 'y-axis-1',
ticks: {
beginAtZero:true,
callback: function (tick, index, ticks) {
return numeral(tick).format('(0,0)');
},
}
}, {
stacked: false,
position: 'right',
type: 'linear',
id: 'y-axis-0',
ticks: {
max: 10,
stepSize: 1,
display: true,
beginAtZero: true,
fontSize: 13,
padding: 10,
callback: function (tick, index, ticks) {
return numeral(tick).format('$ 0,0');
}
}
}]
}
}
});