如何呈现缺失的数据系列并修复 Highcharts 中 x 轴上的日期？

Question

我正在尝试使用 Highcharts 库重新创建与下方相同的折线图。我不知道如何才能像在图像上显示的那样在 x-axis 上显示日期，以及为什么我的第三个数据系列没有显示？

这是我的代码：

https://jsfiddle.net/samwhite/271gxvuL/1/

xAxis: {
      crosshair: true,
      title: { text: 'Date' },
      categories: ['Jan 04', 'Jan 11', 'Jan 18', 'Jan 25'],
      tickmarkPlacement: 'on'
    },
    yAxis: {
      tickInterval: 10,
      min: 5,
      max: 40,
      title: {
        text: '# of Shares (mm)'
      },
      gridLineWidth: 0,
      minorGridLineWidth: 0
    },
    legend: {
      title: { text: 'Option Series' },
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle'
    },
    series: [{
      name: 'GME Call',
      color: "#00429d",
      data: [18.40345395, 18.32595087, 19.15087983, 19.16410026, 18.55687485, 20.95533447, 20.4068335, 30.04684925, 33.73630533, 32.00319773, 20.66296168, 20.77395832, 23.55373851, 38.30826413, 29.98265297, 34.92300725, 32.19425239, 28.27697149, 31.92597248],
      marker: { enabled: false },
      label: { enabled: false }
    }, {
      name: 'GME Net',
      color: "#009c56",
      data: [3.981667259, 3.699835889, 5.707331914, 5.583661701, 4.031818851, 9.716787874, 8.218344693, 24.91298209, 29.72145703, 27.10696218, 15.76613521, 15.21344769, 18.31385242, 33.94138296, 24.14691476, 30.91437069, 30.15361859, 24.33123219, 29.52458396],
      marker: { enabled: false },
      label: { enabled: false }
    }, {
      name: 'GME Put',
      color: "#f79646",
      data: [-14.42178669, -14.62611498, -13.44354791, -13.58043856, -14.525056, -11.2385466, -12.18848881, -5.133867153, -4.014848306, -4.896235549, -4.896826466, -5.560510629, -5.239886084, -4.366881175, -5.835738209, -4.00863656, -2.040633802, -3.945739308, -2.401388521],
      marker: { enabled: false },
      label: { enabled: false }
    }],

Answer 1

您需要将数据更改为数组的数组，其中嵌套数组包含 x 日期格式，例如：

[[ x date in miliseconds, y value]]

您可以使用 pointStart 和 pointInterval 功能：

https://api.highcharts.com/highcharts/series.line.pointStart

https://api.highcharts.com/highcharts/series.line.pointInterval

您可以定义想要在 xAxis 上显示的类别数组 - 就像您的示例中所做的那样

如何呈现缺失的数据系列并修复 Highcharts 中 x 轴上的日期？

How to render the missing data series and fix the dates on the x-axis in Highcharts?

javascript

jquery

data-visualization

linechart

highcharts