Highstock 底部图表未显示答案

【问题标题】：Highstock bottom chart not shownHighstock 底部图表未显示
【发布时间】：2017-02-13 13:56:04
【问题描述】：

我正在使用官方的 highstock 图表demo 来创建类似的东西，其中 2 个图表相互堆叠。问题是底部图表（成交量）不显示jsfiddle

aapl-ohlc.json 文件的简要说明会有所帮助。

...    
const data = JSON.parse(document.getElementById('ohlc-data').innerHTML);


// split the data set into ohlc and volume
const ohlc = data.map((a) => [a[0], a[1], a[2], a[3], a[4]])
const volume = data.map((a) => [a[0], a[5]])

// set the allowed units for data grouping
const groupingUnits = [
  [
    'week', // unit name
    [1] // allowed multiples
  ],
  [
    'month', [1, 2, 3, 4, 6]
  ]
]

// create the chart
Highcharts.stockChart('container', {
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  scrollbar: {
    enabled: false
  },
  rangeSelector: {
    selected: 4,
    inputEnabled: false
  },

  title: {
    text: ''
  },

  yAxis: [{
    labels: {
      align: 'right',
      x: -3
    },
    title: {
      text: ''
    },
    height: '60%',
    lineWidth: 2
  }, {
    labels: {
      align: 'right',
      x: -3
    },
    title: {
      text: ''
    },
    top: '65%',
    height: '35%',
    offset: 0,
    lineWidth: 2
  }],

  tooltip: {
    split: true
  },

  series: [{
    type: 'candlestick',
    name: 'AAPL',
    data: ohlc,
    dataGrouping: {
      units: groupingUnits
    }
  }, {
    type: 'column',
    name: 'Volume',
    data: volume,
    yAxis: 1,
    dataGrouping: {
      units: groupingUnits
    }
  }],
  navigator: {
    enabled: false

  }
});

【问题讨论】：

标签： javascript highcharts highstock

【解决方案1】：

这一行：

const volume = data.map((a) => [a[0], a[5]])

指向一个不存在的元素。 a[5] 未定义（每个子数组只有五个元素，没有第六个元素），因此您的数据中没有 y 值，因此没有要显示的数据系列。

我不知道应该用什么数据元素来表示音量，但作为参考，只是为了表明它确实有效，这是一个使用

的更新小提琴

const volume = data.map((a) => [a[0], a[1]])

https://jsfiddle.net/jlbriggs/0t9rq1f7/1/

编辑：

请注意，在您基于小提琴的演示示例中，他们使用的文件是 aapl-ohlcv.json，而不是 aapl-ohlc.json，它实际上在每个子数组中都有第 6 个数据元素。

【讨论】：