Chart.js 具有{x，y}点数据的折线图仅显示2个值

代码笔有我的代码

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

值的最小值和最大值。我是否误解了点折线图的设计原理，或者我是否有缺陷

---

提前感谢您的关注

试试这个，这个链接可能对你有帮助

var ctx=document.getElementById（“myChart”）；
var散点图=新图表（ctx{
键入：“散布”，
数据：{
数据集：[{
标签：“散布数据集”，
数据：[{x:0，y:65}，
{x:4，y:59}，
{x:100，y:80}，
{x:110，y:81}，
{x:125，y:56}]
}]
},
选项：{
比例：{
xAxes：[{
类型：'线性'，
位置：'底部'
}]
}
}
});

点对象（{x:2，y:4}）可以通过折线图进行解释，如果您只是在数据集键之前指定了标签键，则应该正确显示：

data: {
        labels:["a","b","c",...]
        datasets: [{
            label: 'my Dataset',
            data: [{x: 0, y: 65}, 
                     {x: 4, y: 59}, 
                     {x: 100, y: 80}, 
                     {x: 110, y: 81}, 
                     {x: 125, y: 56}]
        }]
    },

请注意，标签数组和数据集中的数据对象应具有相同数量的元素。
要帮助2019年陷入这一困境的人（Chart.js 2.0），请参见以下内容：

对于那些喜欢深入研究细节并形成自己推论的人，可以参考chartjs示例（查看其来源）

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

如果您将类型更改为“散布”

@Hackerman，那么如果您需要一条线呢？我有完全相同的问题，这让我发疯。最好练习解释您的答案，如果可能的话，还可以链接文档。这会绘制散点图，而不是折线图。只有折线图有一个奇怪的问题，即只绘制两个第一个数据点。我希望我的点与折线图一样的线连接起来，这是什么？@Jonas你可以使用

tension:0

像这个例子一样，xAxes定义中缺少结束符“]}”，但除此之外，它节省了我的时间。谢谢谢谢奥莱克的到场。我已经修复了缺少的括号和闭包。只是

键入：“linear”

帮了我一把。谢谢但是数据中的x值变得无用，因为所有的点在水平方向上都是等距的。。

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'
                        }
                    }],
                }
            }
        }
     );