【问题标题】:Display Date and time on highcharts在 highcharts 上显示日期和时间
【发布时间】:2019-12-27 20:11:25
【问题描述】:

我有以下数据

firstData = [  
["2019-11-24", "12:38:54"],
 ["2019-11-21", "07:06:29"],
 ["2019-11-20", "19:26:37"],
 ["2019-09-26", "19:56:00"] ]

secondData = [ 
["2019-09-26", "10:26:00"],
 ["2019-11-20", "06:52:34"],
 ["2019-11-21", "07:06:19"],
 ["2019-11-24", "07:38:54"] ]

我想显示这样的图表。 date and time graph

【问题讨论】:

  • 在您的数据中,什么是“x”,什么是“y”值? Highcharts 需要将数据作为数组数组或对象数组,其中嵌套数组如下所示:[x value, y-value] 和嵌套对象如下所示:{x: x-value, y-value}。 x 值可以是数字或字符串(xAxis 显示为日期或类别等),y 值必须是数字。
  • x 值为完整日期,如“2019-11-24”,y 值为时间,如“12:38:54”。我添加了一个模拟图

标签: highcharts angular-highcharts


【解决方案1】:

所以正如我在评论中提到的,y 值必须是一个数字。如果您想将其呈现为时间格式,则需要将此字符串转换为适当的数字,请查看下面的函数和演示:https://jsfiddle.net/BlackLabel/2vc7aphd/1/

function parseToNumber(string) {
  return Date.parse("1-1-1 " + string) - Date.parse('1-1-1 00:00:00')
}

function parseData(data) {
  let output = [];
  data.forEach(d => {
    let x = d[0],
      y = d[1];

    output.push({
      name: x,
      y: parseToNumber(y),
      label: y
    });
  })
  return output;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-06-06
    相关资源
    最近更新 更多