chart.js - 带有 {x, y} 点数据的折线图仅显示 2 个值

Question

https://codepen.io/shaz1234/pen/PEKjOV

代码笔有我的代码

new Chart(document.getElementById("chartjs-0"),                    {
    "type":"line",
    "data": {
              "datasets": [
                 { 
                   "label":"My First Dataset",
                   "data": [
                     {x: 0, y: 65}, 
                     {x: 4, y: 59}, 
                     {x: 100, y: 80}, 
                     {x: 110, y: 81}, 
                     {x: 125, y: 56}
                    ],
                   "fill":false,
                   "borderColor":"rgb(75, 192, 192)",
                   "lineTension":0.1
                 }
              ]
             },
             "options":{
             }
          }
     );

非常简单的示例，但图表仅显示前两个点。我本来希望图表可以缩放到提供的最小值和最大值 x值。我是否误解了点折线图的设计原理，还是我有错误？

提前感谢您的观看。

Answer 1

为了帮助那些在 2019 年(Chart.js 2.0)陷入困境的人，请参见下文:

对于那些喜欢深入细节并形成自己的推论的人，您可以引用 https://www.chartjs.org/samples/latest/scales/time/line-point-data.html 中的 chartjs 示例。 (去查看它的来源)。

对于那些想要快速回答的人:简而言之，您可以维护现有代码，但添加以下选项:(为了完整性，我重新附加了 Shaz 的代码)

new Chart(document.getElementById("chartjs-0"), {
    "type":"line",
    "data": {
              "datasets": [
                 { 
                   "label":"My First Dataset",
                   "data": [
                     {x: 0, y: 65}, 
                     {x: 4, y: 59}, 
                     {x: 100, y: 80}, 
                     {x: 110, y: 81}, 
                     {x: 125, y: 56}
                    ],
                   "fill":false,
                   "borderColor":"rgb(75, 192, 192)",
                   "lineTension":0.1
                 }
              ]
             },
             // this is the part that will make it work... see .. xAxes type:'linear'
             "options":{
                 responsive: true, 
                 title: {
                     // optional: your title here
                 },
                 scales: {
                     xAxes: [{
                           type: 'linear', // MANDATORY TO SHOW YOUR POINTS! (THIS IS THE IMPORTANT BIT) 
                           display: true, // mandatory
                           scaleLabel: {
                                display: true, // mandatory
                                labelString: 'Your label' // optional 
                           },
                      }], 
                     yAxes: [{ // and your y axis customization as you see fit...
                        display: true,
                        scaleLabel: {
                             display: true,
                             labelString: 'Count'
                        }
                    }],
                }
            }
        }
     );