Chart.js：異なるデータセットのサイズ

Question

私はかなり一般的な使用例であると思うものを表示する必要があります。 1週間をカバーする毎日平均および時間平均。

一つのデータセットが明らかに7つのデータポイントを持って、他のは、私が例やこれを可能とする文書化オプションを見つけることができませんでした168

を持っています。確かに - 私はほとんど何も設定することができますが、&のように見えますが、データサイズに関しては、両方のデータセットにラベルがあるデータポイントと同じ数のデータポイントがあることが予想されます。

データポイントの少ないデータセット（この例ではdaily avg）と他のデータポイント（168データポイント）だけを使って細い線を描画し、グラフにaynthing elseを追加しないでください（縦棒なしなど）

これはChart.jsでも可能ですか？

Answer 1

代替データ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があります。