在AnyChart中使用x轴上的时间渲染多系列折线图

时间:2016-10-13 13:22:29

标签: data-visualization anychart

我正在尝试使用多个系列的Anychart折线图,日期时间在x轴上。无法完美呈现图表。它使用给定的数据绘制系列1,然后为第二个系列绘制第一个系列值之后在x轴上新近显示日期时间,然后绘制系列2。

数据就像:

"data": [
  {"x": "10/2/2016 01:00:00 AM", "value": "128.14"},
  {"x": "10/2/2016 01:10:00 AM", "value": "112.61"}
]
  },{
// second series data
"data": [
      {"x": "10/2/2016 01:01:00 AM", "value": "90.54"},
      {"x": "10/2/2016 01:02:00 AM", "value": "104.19"},
      {"x": "10/2/2016 01:11:00 AM", "value": "150.67"}
]

它必须在x轴上绘制,如10/2/2016 01:00:00 AM,10/2/01 01:01:00 AM,10/2/01 01:02:00 AM,10/2 / 2016 01:10:00 AM,10/2/01 01:11:00 AM

但它的情节如同10/2/2016 01:00:00 AM,10/2/01 01:10:00 AM,10/2/2016 01:01:00 AM,10/2/01 01: 02:00 AM,10/2/01 01:11:00 AM

更新代码:

anychart.onDocumentReady(function() {
// JSON data
  var json = {
    // chart settings
    "chart": {
      // chart type
      "type": "line",
      // chart title
      "title": "Axes settings from JSON",
      // series settings
      "series": [{
        // first series data
        "data": [
          {"x": "10/2/2016 01:00:00 AM", "value": 128.14},
          {"x": "10/2/2016 01:10:00 AM", "value": 112.61},
          {"x": "10/3/2016 01:00:00 AM", "value": 12.14},
          {"x": "10/3/2016 01:10:00 AM", "value": 152.61},
        ]},{
        "data": [
          {"x": "10/2/2016 01:09:00 AM", "value": 28.14},
          {"x": "10/2/2016 01:11:00 AM", "value": 12.61},
          {"x": "10/3/2016 01:01:00 AM", "value": 1.14},
          {"x": "10/3/2016 01:12:00 AM", "value": 15.61},
        ]
      }],
            // x scale settings
      "xScale": {
        ticks: 
{scale: "DateTime"}
      },

xAxes: [{
title: "Basic X Axis"
  }],
      // chart container
      "container": "container"
    }
  };

  // get JSON data
  var chart = anychart.fromJson(json);

  // draw chart
  chart.draw();
});

1 个答案:

答案 0 :(得分:0)

使用此类数据,您需要使用散点图:http://docs.anychart.com/7.12.0/Basic_Charts_Types/Scatter_Chart

日期时间刻度应该在JSON中设置如下:

"xScale": {
type: "datetime",
minimum: "10/02/2016 00:00:00",
maximum: "10/03/2016 12:00:00",
}

以下是一个示例:https://jsfiddle.net/3ewcnp5j/102/