代替データscatter chart datasetを使用して少なくとも1つのデータセットを表現できるのであれば、実際にchart.jsで記述することができます。例として、毎日の平均値を棒グラフ、時間単位の平均値を線(別名a mixed chart type)で表示してみましょう。
まず、各曜日のラベルを含む棒グラフを設定し、データの1日平均値を最初のデータセットとして指定します。
次に、別のデータセットを作成しますが、type
プロパティを'line'
に設定します。異なるX軸と別のラベルセットを使用したいので、{x: 0, y: 2}
表記を使用してデータを表現する必要があります。これにより、上記で定義したラベルを使用してスケールを迂回することができます。
最後に、(また、それはあなたが2番目の規模のいずれかが表示されないfalse
からdisplay
プロパティの設定)ごoptions.scales
設定では、2つのxAxes
スケールを定義し、第二X軸スケールにあなたの第二のデータセットを関連付けます。
このようなグラフの構成になります。
var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
datasets: [{
type: 'bar',
label: 'Daily Avg',
backgroundColor: chartColors.red,
data: dailyAvgData,
borderColor: 'white',
borderWidth: 2
}, {
type: 'line',
label: 'Hourly Avg',
borderColor: chartColors.green,
backgroundColor: chartColors.green,
borderWidth: 1,
fill: false,
pointRadius: 0,
xAxisID: 'x-axis-2',
data: hourlyAvgData
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js - Combo Chart With Multiple Scales (X Axis)'
},
tooltips: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{}, {
id: 'x-axis-2',
type: 'linear',
position: 'bottom',
display: false,
}],
yAxes: [{
ticks: {
min: 0,
max: 50
}
}]
}
}
});
このcodepenで実際に確認できます。
これは別の例ですが、コンボチャート(毎日の棒グラフ、時間別の行)を使用する代わりに、両方のプロットが線です。グラフタイプがbar
からline
に変更されている点を除いて、アプローチはまったく同じです。
注:このバージョンでは、1日の平均ラインを1ずつ調整して、ポイントが「1日の終わり」にプロットされるようにしました。前の例では、毎日の初めに平均avgを表示していました(これは技術的には正しくありません)。
グラフの行バージョンを示すexample codepenがあります。
2行の線グラフをイメージングしていますか(毎日1枚と1時間ごとに1枚)?または、毎日が棒グラフであり、毎時が行であるコンボチャートですか? – jordanwillis
私は基本的にちょうど7ポイント補間され、毎時のラインは168ポイントになるので、毎日が「スムーズ」であると予想される2ラインについて考えていました。これは理想的なことですが、毎日の行が既に存在していて、毎時の行がどのように視覚的に見えるかをテストしたかったのです。 – Perlator
コンボから行だけに変更するのはとても簡単です。私は別の例で私の答えを更新しました。うまくいけば、これはあなたの元の質問に完全に答えます。 – jordanwillis