Question

我有这种数据阵列：

[
   {
      "price":"49",
      "date":"21\/01\/2018"
   },
   {
      "price":"30",
      "date":"01\/01\/2018"
   },
   {
      "price":"32",
      "date":"15\/11\/2017"
   }
]

现在我想创建一个chartjs的图表，它显示了过去12个月的价格曲线。

我在过去几个月写了这个小脚本来生成我：

function getPreviousMonths() {
    var months = [];

    for (i = 0; i < 12; i++) {
        var month = moment().subtract(i, 'months').format('MMMM Y');
        months.push(month);
    }
    return months.reverse();
}

我现在如何创建chartjs图表？我查看了文档，但在轴内设置日期时却非常困惑......

Answer 1

有关在xAxes上设置时间刻度的信息，请参阅http://www.chartjs.org/docs/latest/axes/cartesian/time.html，然后您必须将日期字段转换为实际日期对象：

  xAxes: [{
    type: 'time',
    distribution: 'linear',
    ticks: {
      source: 'labels'
    },
    time: {
    unit: 'month',
    unitStepSize: 1,
    displayFormats: {
       'month': 'MMM'
      }
    }
  }

检查此jsfiddle，显示时间系列呈现为一行的示例：https://jsfiddle.net/beaver71/9f9a2z88/

Answer 2

您有2个独立的数据阵列到2个不同的阵列。日期之一（比如dates_array）和另一个价格（比如price_array）。然后你只需要创建新的图表。

var chart = new Chart(element, {
    type: 'line',
    data: {
      labels: dates_array,
      datasets: [{
        label: '# price',
        data: price_array
      }]
    }
  });

这里，element是显示图表的元素。将为labels分配日期数组，并为data分配价格数组。你可以查看这个jsfiddle https://jsfiddle.net/j7gta8yn/

图表js的价格历史

2 个答案: