从 0 开始 Chart.js 时间刻度

问题描述 投票:0回答:1

在这个 Chart.js 时间刻度中,为什么“3 月 11 日”不从 0 开始? 我试图让它从零开始,但它是在随机时间开始的。 任何见解将不胜感激!

enter image description here

https://jsfiddle.net/askhflajsf/7yped1d5/(使用最新的master分支构建

var barChartData = {
  labels: ["2013-03-09", "2013-03-16", "2013-03-23", "2013-03-30", "2013-04-06"],
  datasets: [{
    borderColor: "#3e95cd",
    data: [10943, 29649, 6444, 2330, 36694],
    fill: false,
    borderWidth: 2
  },
  {
    borderColor: "#ff3300",
    data: [9283, 1251, 6416, 2374, 9182],
    fill: false,
    borderWidth: 2
  }]
};

Chart.defaults.global.defaultFontFamily = "'Comic Sans MS'";
// Disable pointers
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.elements.point.hoverRadius = 0;

var ctx = document.getElementById("bar-chart").getContext("2d");
new Chart(ctx, {
  type: 'line',
  data: barChartData,
  options: {
    responsive: true,
    legend: {
      display: true,
      position: "right"
    },
    title: {
      display: false
    },
    scales: {
      xAxes: [{
        type: "time",
        ticks: {
          minRotation: 90
        }
      }]
    }
  }
});
<script src="http://www.chartjs.org/dist/master/Chart.bundle.min.js"></script>
<canvas id="bar-chart"></canvas>

javascript time chart.js
1个回答
1
投票

似乎这是设计使然,为什么不对此做一个简单的解决方法呢?使用 moment.js 进行时间操作,并将数据加载到 x 轴,类型为 linear 而不是 date;这基本上给出了相同的输出。

JSFiddle:这里

代码:

var timeOperations = ["2013-03-09", "2013-03-16", "2013-03-23", "2013-03-30", "2013-04-06"].map(function(value){
    return moment(value, "YYYY-MM-DD").format('MMM-DD').toString();
});
var barChartData = {
  labels: timeOperations,
  datasets: [{
    borderColor: "#3e95cd",
    data: [10943, 29649, 6444, 2330, 36694],
    fill: false,
    borderWidth: 2
  },
  {
    borderColor: "#ff3300",
    data: [9283, 1251, 6416, 2374, 9182],
    fill: false,
    borderWidth: 2
  }]
};
© www.soinside.com 2019 - 2024. All rights reserved.