Question

我有两个时间序列例如：

s1:
  2017-01-06 18:39:30    100
  2017-01-07 18:39:28    101

和

s2:
2017-01-07 18:00:00     90
2017-01-08 18:00:00    105

我想在Chartjs图表中绘制这些图，但似乎Chartjs只采用一个x轴数组（或Chartjs术语中的标签）。

所以我的问题是绘制这两者的最佳方法是什么？

我的方法是编写一个函数（在python中，虽然这个部分的语言并不重要），它遍历两个时间序列并创建3个新数组，这些数组显然是Chartjs需要基于第一个例子的格式在这里：https://www.sitepoint.com/introduction-chart-js-2-0-six-examples/

算法（在sudo代码中）如下：

    # inputs are initial time series s1 and s2
    y1 = [] # to hold new s1 data values
    y2 = [] # to hold new s2 data values
    x  = [] # to hold times

    # iterate through longest series s1 or s2
    if s1[idx].time > s2[idx].time
      x.append(s1[idx].time)
      y1.append(s1[idx].data)
      # y2 appends the linear interpolation of 
      # of closest y2 points

    if (s1[idx].time < s2[idx].time)
      x.append(s2[idx].time)
      # opposite of above. ie. swap y1<->y2, s1->s2

    else # they have the same time
      x.append(s1[idx].time)
      y1.append(s1[idx].data)
      y2.append(s2[idx].data)

还有一些其他条件检查，用于何时数据用完较短的系列，但这是主要逻辑。之后我有3个数组，我现在可以通过一个时间/标签数组/ x轴和两个数据数组添加到图表js。然而，考虑到我认为这个用例的常见程度，这似乎更复杂。非常感谢任何帮助或建议。

Answer 1

在ChartJS中，标签是Category Cartesian Axis。由于您在代码中提到了线性插值，我假设像2017-01-06 18:39:30这样的字符串不是类别，它们代表x轴的数值。所以我们需要通知ChartJS x轴上的字符串实际上是时间。我们在比例选项中这样做。

var s1 = {
  label: 's1',
  borderColor: 'blue',
  data: [
    { x: '2017-01-06 18:39:30', y: 100 },
    { x: '2017-01-07 18:39:28', y: 101 },
  ]
};

var s2 = {
  label: 's2',
  borderColor: 'red',
  data: [
    { x: '2017-01-07 18:00:00', y: 90 },
    { x: '2017-01-08 18:00:00', y: 105 },
  ]
};

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: { datasets: [s1, s2] },
  options: {
    scales: {
      xAxes: [{
        type: 'time'
      }]
    }
  }
});

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

您可以在Chart.js documentation中找到更多信息。

Answer 2

当您的图表为scatter类型时，您可以拥有[{x：＆＃34;值＆＃34;，y：＆＃34;值＆＃34;}]格式的数据。

为了使图表有效，请执行此操作。

＆＃13;

var canvas = document.getElementById("graph");
var s1 = [{x:"2017-01-06 18:39:30",y:"100"},{x:"2017-01-07 18:39:28",y:"101"}];
var s2 = [{x:"2017-01-07 18:00:00",y:"90"},{x:"2017-01-08 18:00:00",y:"105"}];

var graphParams = {
	type:"scatter",
	data:{
		datasets: [{
			label:"Series 1",
			data:s1,
			borderColor:"red",
			backgroundColor:"transparent",
		},
		{
			label:"Series 2",
			data:s2,
			borderColor:"blue",
			backgroundColor:"transparent",
		}],
	},
	options:{
		maintainAspectRatio:false,
		responsive:false,	
		scales:{
			xAxes:[{
				type:"time",
				distribution: "series",
			}],
		}
	}

}
ctx = new Chart(canvas, graphParams);

＆＃13;

<canvas id="graph" height="500" width="700"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.min.js"></script>

＆＃13;

如何在chartjs中绘制多个时间序列，其中每个时间序列具有不同的时间

2 个答案: