图表JS：忽略x值并将点数据放在第一个可用标签上 [英] Chart JS: Ignoring x values and putting point data on first available labels

问题描述

我正在chart.js中制作折线图，但遇到了一个问题，我试图在线上绘制点数据，但是它忽略了我提供的x值，而是将它们放在第一个可用的标签上。

I am making a line chart in chart.js, and am having an issue where I am trying to plot point data on the line but it is ignoring the x values I am giving, and instead putting them on the first available label.

this.myLineChart = new Chart(this.ctx, {
    type: 'line',
    data: {
        labels: [0,2,4,6,8,10],
        datasets: [{
            label: 'mylabel1',
            fill: false,
            backgroundColor: 'blue',
            borderColor: 'blue',
            data: [{
                x: 2.5,
                y: 85
            }, {
                x: 3.5,
                y: 85
            }]
        }]
    },
    options: {
        title: {
            display: true,
            text: 'mytitle1'
        },
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    suggestedMin: 70,
                    suggestedMax: 100
                }
            }]
        }
    }
});

我得到的结果是：

The result I get is this:

但是我希望此行位于x值2.5和3.5，以便它位于2和4标签之间。

But instead I would like this line to be at the x values 2.5 and 3.5, so that it lies in between the 2 and 4 labels.

我应该在代码中进行哪些更改以使其表现出所需的行为？

What should I change in the code to make it behave as I want?

推荐答案

在那种情况下，您不需要使用 labels 数组。而是将x轴类型设置为 linear 并将x轴刻度的最小值和最大值设置为（也许 stepSize 作为很好）在图表选项中，例如：

In that case, you don't need to use labels array. Instead set x-axis' type to linear and minimum and maximum value for x-axis' ticks (perhaps stepSize as well) in your chart options, like so :

xAxes: [{
   type: 'linear',
   ticks: {
      suggestedMin: 0,
      suggestedMax: 10,
      stepSize: 2
   }
}]

ᴡᴏʀᴋɪɴɢxxᴀᴍᴘʟᴇ

myLineChart = new Chart(ctx, {
   type: 'line',
   data: {
      datasets: [{
         label: 'mylabel1',
         fill: false,
         backgroundColor: 'blue',
         borderColor: 'blue',
         data: [{
            x: 2.5,
            y: 85
         }, {
            x: 3.5,
            y: 85
         }]
      }]
   },
   options: {
      title: {
         display: true,
         text: 'mytitle1'
      },
      scales: {
         xAxes: [{
            type: 'linear',
            ticks: {
               suggestedMin: 0,
               suggestedMax: 10,
               stepSize: 2 //interval between ticks
            }
         }],
         yAxes: [{
            display: true,
            ticks: {
               suggestedMin: 70,
               suggestedMax: 100
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

这篇关于图表JS：忽略x值并将点数据放在第一个可用标签上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！