Chartjs 2.7.3：将Y数据设置在正确的X位置轴上 [英] Chartjs 2.7.3: Set Y data at the correct X position axis

问题描述

data: {
            labels: ['29 Oct, 18', '30 Oct, 18', '02 Nov, 18', '14 Nov, 18', '15 Nov, 18', '19 Nov, 18', '20 Nov, 18', '28 Nov, 18'],
            datasets: [{
                pointRadius: 0,
                label: 'Positive',
                lineTension: 0, 
                data: [{'x': '15 Nov, 18', 'y': 18636}],
                borderWidth: 1,
                backgroundColor: 'rgba(0, 255, 0, 0.5)', 
            },{
                pointRadius: 0,
                label: 'Negative',
                lineTension: 0, 
                data: [{'x': '29 Oct, 18', 'y': -20480}, {'x': '30 Oct, 18', 'y': -284}, {'x': '02 Nov, 18', 'y': -1625}, {'x': '14 Nov, 18', 'y': -6622}, {'x': '15 Nov, 18', 'y': -12991}, {'x': '19 Nov, 18', 'y': -1645}, {'x': '20 Nov, 18', 'y': -1230}, {'x': '28 Nov, 18', 'y': -39612}],
                borderWidth: 1,
                backgroundColor: 'rgba(255, 0, 0, 0.5)', 
            }]
        },

问题是绿条位于错误的x位置。它目前处于'29 okt'但我用'15 nov'标记它

The problem is that the green bar is at the wrong x position. It is currently at '29 okt' but I tagged it with '15 nov'

如何将这些数据集设置为正确的x位置

How do I set those datasets to the correct x position

推荐答案

由于您指定了数据集的 x / y 坐标，因此您必须在图表选项中将 xAxes 比例类型设置为时间 。

Since you specified the x/y coordinates of your data set, you have to set your xAxes scale type as time in your chart options.

var options = {
  scales: {
    xAxes: [
      {
        type: "time"
      }
    ]
  }
};

参见官方文档或检查下面工作示例中使用的选项。

See official docs for all possible configurations or check the options used in the working example below.

重要：您必须将数据集中的日期格式更改为'YYYY-MM -DD'否则时刻会抛出这个警告。

Important: You have to change the date format in your data set to something like 'YYYY-MM-DD' otherwise moment would throw this warning.

弃用警告：提供的值不在公认的RFC2822或
中ISO格式。时刻构造回落到js Date（），这在所有浏览器和版本中都不是
可靠。

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions.

var data = {
  labels: [
    "2018-10-29",
    "2018-10-30",
    "2018-11-02",
    "2018-11-14",
    "2018-11-15",
    "2018-11-19",
    "2018-11-20",
    "2018-11-28"
  ],
  datasets: [{
      pointRadius: 0,
      label: "Positive",
      lineTension: 0,
      data: [{
        x: "2018-11-15",
        y: 18636
      }],
      borderWidth: 1,
      backgroundColor: "rgba(0, 255, 0, 0.5)"
    },
    {
      pointRadius: 0,
      label: "Negative",
      lineTension: 0,
      data: [{
          x: "2018-10-29",
          y: -20480
        },
        {
          x: "2018-10-30",
          y: -284
        },
        {
          x: "2018-11-02",
          y: -1625
        },
        {
          x: "2018-11-14",
          y: -6622
        },
        {
          x: "2018-11-15",
          y: -12991
        },
        {
          x: "2018-11-19",
          y: -1645
        },
        {
          x: "2018-11-20",
          y: -1230
        },
        {
          x: "2018-11-28",
          y: -39612
        }
      ],
      borderWidth: 1,
      backgroundColor: "rgba(255, 0, 0, 0.5)"
    }
  ]
};
var options = {
  scales: {
    xAxes: [{
      type: "time",
      distribution: 'series',
      time: {
        displayFormats: {
          day: 'D MMM, YY'
        }
      },
      ticks: {
        source: "labels"
      },
      gridLines: {
        display: false
      }
    }]
  }
};

var ctx = document.getElementById("myChart").getContext("2d");

var myBarChart = new Chart(ctx, {
  type: "bar",
  data: data,
  options: options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart" width="300" height="100"></canvas>

这篇关于Chartjs 2.7.3：将Y数据设置在正确的X位置轴上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！