0
chartjs : linechart 및 barchart와 혼합 차트를 만들어야합니다.혼합 차트 barchart가 표시되지 않습니다
차트에는 월 평균 기온 차트가 포함되어 있어야합니다. 한 달 동안 소비 된 막대 차트
막대 그래프는 표시 할 수 있지만 막대 차트는 표시 할 수 없습니다. 막대 그래프에 대한
{
label: "Line",
type: 'line',
borderColor: color,
backgroundColor: color,
steppedLine: true,
fill: false,
xAxisID: "lineChart",
yAxisID: 'temperature',
pointRadius: 2,
lineTension: 0,
data: [{x : moment("11-2017", "M-YYYY"), y : 20}, {x : moment("12-2017", "M-YYYY"), y : 19}, {x : moment("1-2018", "M-YYYY"), y : 22}, {x : moment("2-2018", "M-YYYY"), y : 16}]
}
: 그래서
{
label: "Bar",
type: 'bar',
borderColor: color,
backgroundColor: color,
xAxisID: "lineChart",
yAxisID: 'consumption',
data: [{x : moment("11-2017", "M-YYYY"), y : 20}, {x : moment("12-2017", "M-YYYY"), y : 19}, {x : moment("1-2018", "M-YYYY"), y : 22}, {x : moment("2-2018", "M-YYYY"), y : 16}]
}
방법이 여기를
차트 옵션
var chartOptions = {
animation: {
easing: "easeOutBounce"
},
legend: {
position: 'bottom'
},
tooltips: {
mode: 'nearest',
intersect: false
},
scales: {
xAxes: [{
id: 'lineChart',
type: 'time',
unit: 'day',
unitStepSize: 1,
time: {
displayFormats: {
'millisecond': 'DD/MMMM/YYYY HH:mm',
'second': 'mm:ss',
'minute': 'HH:mm',
'hour': 'DD HH:mm',
'day': 'MMM DD',
'week': 'MMM DD',
'month': 'MMM DD',
'quarter': '[Q]Q - YYYY',
'year': 'YYYY',
}
},
display: true,
position: 'bottom',
ticks: {
maxTicksLimit: 8
},
scaleLabel: {
display: true,
labelString: "Heure",
}
}],
yAxes: [{
id: 'consumption',
type: 'linear',
position: 'left',
ticks: {
beginAtZero: true
}
},
{
id: 'temperature',
type: 'linear',
position: 'right',
ticks: {
beginAtZero: true
}
}]
}
};