Question

codepen有我的代码

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

点对象（{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}]
        }]
    },

请注意，标签数组和数据集中的数据对象应具有相同数量的元素。

Answer 2

试试这个，此链接可能对您有所帮助http://www.chartjs.org/docs/latest/charts/scatter.html

var ctx = document.getElementById("myChart");

var scatterChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{x: 0, y: 65}, 
                     {x: 4, y: 59}, 
                     {x: 100, y: 80}, 
                     {x: 110, y: 81}, 
                     {x: 125, y: 56}]
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom'
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
 <canvas id="myChart" width="400" height="400"></canvas>

修改为什么我们使用Scatter图表而不是折线图？当我们想要在相同的差异上绘制数据集时使用折线图，并且数据结构是一维数组，例如，数据：[20,10]然后我们使用折线图。

但是当我们想要关于不同差异的绘图数据和数据结构是二维数组时，我们使用散点图。例如，数据：[{ x：10， y：20 }，{ x：15， y：10 }]

Answer 3

为帮助那些在2019年陷入困境的人，请参阅以下内容：

对于那些喜欢深入研究细节并形成自己的推论的人，可以参考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'
                        }
                }]
             }
          }
     );

带有{x，y}点数据的折线图仅显示2个值

3 个答案: