chart.js中的单个折线图上可能有2个数据集吗?

时间:2019-02-07 06:16:37

标签: javascript angular typescript chart.js2

预览: 我在Angular 7应用程序中使用chart.js。我想知道,单个折线图上可能有2个数据集。

详细信息: 在我的X轴上,我有与时间相关的数据,Y轴上包含数字。基于API响应(返回时间戳和数字),我可以生成折线图。但是我想在同一行上有第二个数据集。第二个数据集相关的API响应,给了我时间戳,所以我想使用该时间戳到投影点(可能是不同的颜色)以单行显示。

this.chart = new Chart(ctx, {
      type: 'line',
      data: this.getChartAxisData(),
      options: this.getChartOptions()
    });

getChartAxisData() {
    const first: any[] = this.listOne.map((data) => (new Date(data.date)));
    const firstArray: any[] = this.listOne.map((data) => data.number);
    const second: any[] = this.listTwo.map((data) => (new Date(data.date)));

    return {
      labels: first,
      datasets: [
        {
          data: firstArray
        }
      ]
    };
  }

getChartOptions() {

    return {
      scales: {
        xAxes: [{
          type: 'time',
          time: {
            max: this.endDate,
            min: this.startDate,
            displayFormats: {
              'millisecond': 'hh:mm A',
              'second': 'hh:mm A',
              'minute': 'hh:mm A',
              'hour': 'hh:mm A',
              'day': 'DD-MMM',
              'week': 'DD-MMM',
              'month': 'DD-MMM'
            }
          }
        }],
        yAxes: [{
          ticks: {
            min: 0,
            max: 800
          }
        }]
      }
    };
  }

0 个答案:

没有答案