chart.js - 如何为一个 X 轴 chart.js 绘制多个值

Question

我已经在我的一个 Web 应用程序中实现了 Charts JS 库，但遇到了问题。现在我需要将多个 y 值添加到一个 x 轴点。然而并没有得到解决。

var ctx = document.getElementById("myChart").getContext("2d"); 新图表（ctx，配置）；

var config = {
  type: 'line',
  data: {
    labels: [['01', '11' ,'2018'],
    ['01', '11' ,'2018'],
    ['01', '11' ,'2018'],
    ['01','11','2018'], '02','02','02','02','02','05','05','05','05','06','06','06','06','07','07','07','07','07','07','07','07','08','08','08','08','08','08','08','08','09','09','09','09',['20','02','2019'],['20','02','2019'],'21','21','21','21',['06','03'],['06','03'] ,'','','',''  ,
    ],
    datasets: [{
      label: "My First dataset",
      data: [35.48  ,35.50  ,35.5   ,35.49  ,35.49  ,35.50  ,35.50  ,35.49  ,35.45  ,35.38  ,35.42  ,35.4   ,35.49  ,35.50  ,35.49  ,35.49  ,35.49  ,35.49  ,35.50  ,35.50  ,35.48  ,35.47  ,35.48  ,35.47  ,35.49  ,35.50  ,35.50  ,35.49  ,35.48  ,35.47  ,35.48  ,35.47  ,35.50  ,35.49  ,35.49  ,35.50  ,37     ,37     ,38     ,39     ,40     ,51     ,28     ,29 ],
    }]
  },
  options: {
    scales: {
      xAxes:[{
       ticks: {
   autoSkip: false,
  }
}],
    },
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

<canvas id="myChart"></canvas>

标签： chart.js

Answer 1

您可以添加多个数据集，这些数据集将在图表上绘制一条单独的线。

这是你的例子。

function newDate() {
  return moment().add(days, 'd');
}

var config = {
  type: 'line',
  data: {
    labels: [
      ["01", "11", "2018"],
      ['01', '11', '2018'],
      ['01', '11', '2018'],
      ['01', '11', '2018'], , '02', '02', '02', '02', '05', '05', '05', '05', '06', '06', '06', '06', '07', '07', '07', '07', '07', '07', '07', '07', '08', '08', '08', '08', '08', '08', '08', '08', '09', '09', '09', '09', ['20', '02', '2019'],
      ['20', '02', '2019'], '21', '21', '21', '21', ['06', '03'],
      ['06', '03'], '', '', '', '', '', '', '', '', '', '', '', '', '', ''
    ],
    datasets: [{
        label: "My First dataset",
        data: [35.48, 35.50, 35.5, 35.49, 35.49, 35.50, 35.50, 35.49, 35.45, 35.38, 35.42, 35.4, 35.49, 35.50, 35.49, 35.49, 35.49, 35.49, 35.50, 35.50, 35.48, 35.47, 35.48, 35.47, 35.49, 35.50, 35.50, 35.49, 35.48, 35.47, 35.48, 35.47, 35.50, 35.49, 35.49, 35.50, 37, 37, 38, 39, 40, 51, 28, 29],
      },
      {
        label: "My second dataset",
        data: [35.48, 35.50, 35.5, 35.49, 35.49, 35.50, 35.50, 35.49, 35.45, 35.38, 35.42, 35.4, 35.49, 35.50, 35.49, 35.49, 35.49, 35.49, 35.50, 35.50, 35.48, 35.47, 35.48, 35.47, 35.49, 35.50, 35.50, 35.49, 35.48, 35.47, 35.48, 35.47, 35.50, 35.49, 35.49, 35.50, 37, 37, 38, 39, 40, 51, 28, 29].map(a => a + 20),
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          autoSkip: false
        }

      }],
    },
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<canvas id="myChart"></canvas>