0
chartjs:linechartとbarchartを混在させてチャートを作成する必要があります。混合チャートbarchartは表示されません
グラフには、月の平均気温を示す線図が含まれている必要があります。 1ヶ月の消費を伴う棒グラフ
棒グラフは表示できません。
折れ線グラフのデータセットを追加する場合はここでは、グラフのオプションを持っている
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
}
}]
}
};
、ここでの設定は次のとおりです。棒グラフの場合
{
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}]
}
持って、どのように(例のように月のデータの場合)または1日を含む棒グラフ電子カルテを取る?ここで
はcodepenです:Chart.js 2.7.0へhttps://codepen.io/anon/pen/RLEJqV