Chart.jsを使用して私のデータセットが折れ線グラフ上に表示されないのはなぜですか？

Question

私はChart.jsを使ってWebページに折れ線グラフを表示しようとしています。これは過去5日間の特定のクライアントのアップルストアとgoogleプレイストアのダウンロード数を示しています。データが正常に表示されますが、適切にこれをX軸にラベルを付けていない：私はChart.jsは私がdownloadsChartDataで定義されたラベルを認識することとなるように、値の配列にdataフィールドを切り替えることを試みた

var downloadsChartData = { 
    labels: ["4 Days", "3 Days", "2 Days", "Yesterday", "Today"], 
    datasets: [{ 
     label: "Google Play", 
     fill: false, 
     lineTension: 0, 
     backgroundColor: "rgba(0, 230, 115, 1)", 
     borderColor: "rgba(0, 230, 115, 1)", 
     borderCapStyle: 'butt', 
     borderJoinStyle: 'miter', 
     borderWidth: 2, 
     pointBorderColor: "rgba(150, 75, 75, 1)", 
     pointBorderWidth: 3, 
     pointRadius: 6, 
     pointHoverRadius: 9, 
     pointStyle: 'triangle', 
     data: [{ 
      x: 1, 
      y: 2 
     }, { 
      x: 2, 
      y: 0 
     }, { 
      x: 3, 
      y: 3 
     }, { 
      x: 4, 
      y: 1 
     }, { 
      x: 5, 
      y: 1 
     }] 
    }, { 
     label: "iOS", 
     fill: false, 
     lineTension: 0, 
     backgroundColor: "rgba(26, 117, 255, 1)", 
     borderColor: "rgba(26, 117, 225, 1)", 
     borderCapStyle: 'butt', 
     borderJoinStyle: 'miter', 
     borderWidth: 2, 
     pointBorderColor: "rgba(150, 75, 75, 1)", 
     pointBorderWidth: 3, 
     pointRadius: 6, 
     pointHoverRadius: 9, 
     data: [{ 
      x: 1, 
      y: 4 
     }, { 
      x: 2, 
      y: 2 
     }, { 
      x: 3, 
      y: 0 
     }, { 
      x: 4, 
      y: 1 
     }, { 
      x: 5, 
      y: 4 
     }] 
    }] 
}; 

var downloadsChartOptions = { 
    title: { 
     display: true, 
     text: 'Downloads on Google Play and App Store', 
     fontSize: 30 
    }, 
    scales: { 
     xAxes: [{ 
      scaleLabel: { 
       display: true, 
       abelString: 'Date', 
       fontSize: 20 
      }, 
      type: 'linear', 
      position: 'bottom', 
      gridLines: { 
       display: false 
      } 
     }], 
     yAxes: [{ 
      scaleLabel: { 
       display: true, 
       labelString: 'Downloads', 
       fontSize: 20 
      } 
     }] 
    } 
}; 

var downloadsChart = document.getElementById('downloadsChart').getContext('2d'); 
new Chart(downloadsChart, { 
    type: 'line', 
    data: downloadsChartData, 
    options: downloadsChartOptions 
}); 

：私はこの変更を行う際

... 
pointStyle: 'triangle', 
data: [2, 0, 3, 1, 1] 
}] 
... 
pointHoverRadius: 9, 
data: [4, 2, 0, 1, 4] 
}] 

しかし、チャートが正しくX軸にラベルを付けていないだけでなく、完全に折れ線グラフにデータを表示しなくなります。

私が間違っていることを誰かが気付くことができますか？この問題に関しては、ドキュメンテーションはあまり役に立ちません。

Answer 1

この時点では、ドキュメントはあまり明確ではありませんが、X軸が日付を表す場合など、非数値データをグラフ化する場合は、X軸にリニアスケールを設定することはできません。つまり、軸をリニアスケールで設定すると、データの数値表現（したがってラベルではない）がグラフ化されます。

私はあなたのdownloadsChartOptionsからtype: 'linear'を取り出して、それが問題を解決：あまりにも長い間、この上に悩まされて

var downloadsChartOptions = { 
    title: { 
     display: true, 
     text: 'Downloads on Google Play and App Store', 
     fontSize: 30 
    }, 
    scales: { 
     xAxes: [{ 
      scaleLabel: { 
       display: true, 
       labelString: 'Date', 
       fontSize: 20 
      }, 
      //type: 'linear', 
      position: 'bottom', 
      gridLines: { 
       display: false 
      } 
     }], 
     yAxes: [{ 
      scaleLabel: { 
       display: true, 
       labelString: 'Downloads', 
       fontSize: 20 
      } 
     }] 
    } 
};