时间戳

首页 > 解决方案 > 如何创建具有不同标签的多线图

charts - 如何创建具有不同标签的多线图

问题描述

我需要创建一个图表，其中包含来自不同站点的不同价格，而不是同时获取。实际上我使用的是javascript库chart.js。我想知道是否可以在同一日期不同并且点数不同？

    "{
      "site1":[
         {
           "datetime":"2019-01-09 14:43:58",
           "price":"649.99"
         },
         {
           "datetime":"2019-01-09 14:44:17",
           "price":"649.99"
         },
         {
           "datetime":"2019-01-09 15:02:59",
           "price":"649.99"
          },
          {
            "datetime":"2019-01-09 15:05:43",
            "price":"649.99"
          },
          {
            "datetime":"2019-01-09 15:08:52",
            "price":"649.99"
          },
          {
            "datetime":"2019-01-09 15:16:51",
            "price":"649.99"
          }
       ],
       "site2":[
         {
           "datetime":"2019-01-09 15:03:05",
           "price":"0"
         },
         {
           "datetime":"2019-01-09 15:05:52",
           "price":"804.91"
         },
         {
           "datetime":"2019-01-09 15:09:00",
           "price":"804.91"
         },
         {
           "datetime":"2019-01-09 15:16:58",
           "price":"804.91"
         }
       ]
     }"

这是图表的数据样本。

如果我的解释不简单，我很抱歉。

谢谢

标签： chartschart.jslinemultiline

解决方案

当您根据时间绘制图表时，可以使用 Chart.js + Moment.js 来实现这一点。

请参阅下面的代码或小提琴-> http://jsfiddle.net/goz3jehy/4/

var config = {
  type: 'line',
  data: {
    datasets: [{
        label: "site1",
        backgroundColor: 'red',
        borderColor: 'pink',
        fill: false,
        data: [{
            x: '2019-01-09 14:43:58',
            y: 649.99
          },
          {
            x: '2019-01-09 14:44:17',
            y: 649.99
          },
          {
            x: "2019-01-09 15:02:59",
            y: 649.99
          },
          {
            x: "2019-01-09 15:05:43",
            y: 649.99
          },
          {
            x: "2019-01-09 15:08:52",
            y: 649.99
          },
          {
            x: "2019-01-09 15:16:51",
            y: 700
          }
        ],
      },
      {
        label: "site2",
        backgroundColor: 'orange',
        borderColor: 'yellow',
        fill: false,
        data: [{
            x: "2019-01-09 15:03:05",
            y: 0
          },
          {
            x: "2019-01-09 15:05:52",
            y: 804.91
          },
          {
            x: "2019-01-09 15:09:00",
            y: 804.91
          },
          {
            x: "2019-01-09 15:16:58",
            y: 804.91
          }
        ],
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {          
        }
      }],
    },
  }
};

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

推荐阅读