无法将多个系列添加到 Highstock，但同样适用于 Highcharts

Question

我正在尝试创建一个包含 2 个系列的 highstock 图表，正如您在这个 fiddle 和下面看到的那样，显示了该系列的 none。

  Highcharts.stockChart('container', {
  "exporting": {
    "enabled": false
  },
  "rangeSelector": {
    "inputEnabled": true
  },
  "chart": {
    "type": "line",
    "renderTo": "container",
    "backgroundColor": "#fff",

  },
  "title": {
    "text": "30 DAY GOLD PRICE CHART"
  },
  "scrollbar": {
    "liveRedraw": false
  },
  "subtitle": {
    "text": "www.gold-feed.com"
  },
  "series": [{
    "name": "Open",
    "data": [{
      "x": new Date(2013, 11, 18),
      "y": 1233.7
    }, {
      "x": new Date(2013, 11, 19),
      "y": 1224.77
    }, {
      "x": new Date(2013, 11, 20),
      "y": 1193.18
    }],
    "index": 0
  }, {
    "name": "High",
    "data": [{
      "x": new Date(2013, 11, 18),
      "y": 1244.46
    }, {
      "x": new Date(2013, 11, 19),
      "y": 1226.38
    }, {
      "x": new Date(2013, 11, 20),
      "y": 1207.37
    }],
    "index": 1
  }, {
    "name": "Low",
    "data": [{
      "x": new Date(2013, 11, 18),
      "y": 1216.24
    }, {
      "x": new Date(2013, 11, 19),
      "y": 1187.18
    }, {
      "x": new Date(2013, 11, 20),
      "y": 1191.35
    }],
    "index": 2
  }, {
    "name": "Close",
    "data": [{
      "x": new Date(2013, 11, 18),
      "y": 1218.23
    }, {
      "x": new Date(2013, 11, 19),
      "y": 1187.76
    }, {
      "x": new Date(2013, 11, 20),
      "y": 1202.09
    }],
    "index": 3
  }],
  "credits": {
    "text": "Gold Feed Inc.",
    "href": "http://www.gold-feed.com"
  },
  "xAxis": {
    "title": {
      "text": null
    },
    "labels": {
      "rotation": null
    },
    "type": "datetime"
  },
  "yAxis": [{
    "title": {
      "text": "Price Per Troy Ounce"
    }
  }],
  "navigator": {
    "adaptToUpdatedData": false
  },
  "legend": {
    "x": 10
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

如果我将 Highcharts.stockChart 替换为 Highcharts.chart，它会完美运行，如 fiddle 及以下所示。

  Highcharts.chart('container', {
  "exporting": {
    "enabled": false
  },
  "rangeSelector": {
    "inputEnabled": true
  },
  "chart": {
    "type": "line",
    "renderTo": "container",
    "backgroundColor": "#fff",

  },
  "title": {
    "text": "30 DAY GOLD PRICE CHART"
  },
  "scrollbar": {
    "liveRedraw": false
  },
  "subtitle": {
    "text": "www.gold-feed.com"
  },
  "series": [{
    "name": "Open",
    "data": [{
      "x": new Date(2013, 11, 18),
      "y": 1233.7
    }, {
      "x": new Date(2013, 11, 19),
      "y": 1224.77
    }, {
      "x": new Date(2013, 11, 20),
      "y": 1193.18
    }],
    "index": 0
  }, {
    "name": "High",
    "data": [{
      "x": new Date(2013, 11, 18),
      "y": 1244.46
    }, {
      "x": new Date(2013, 11, 19),
      "y": 1226.38
    }, {
      "x": new Date(2013, 11, 20),
      "y": 1207.37
    }],
    "index": 1
  }, {
    "name": "Low",
    "data": [{
      "x": new Date(2013, 11, 18),
      "y": 1216.24
    }, {
      "x": new Date(2013, 11, 19),
      "y": 1187.18
    }, {
      "x": new Date(2013, 11, 20),
      "y": 1191.35
    }],
    "index": 2
  }, {
    "name": "Close",
    "data": [{
      "x": new Date(2013, 11, 18),
      "y": 1218.23
    }, {
      "x": new Date(2013, 11, 19),
      "y": 1187.76
    }, {
      "x": new Date(2013, 11, 20),
      "y": 1202.09
    }],
    "index": 3
  }],
  "credits": {
    "text": "Gold Feed Inc.",
    "href": "http://www.gold-feed.com"
  },
  "xAxis": {
    "title": {
      "text": null
    },
    "labels": {
      "rotation": null
    },
    "type": "datetime"
  },
  "yAxis": [{
    "title": {
      "text": "Price Per Troy Ounce"
    }
  }],
  "navigator": {
    "adaptToUpdatedData": false
  },
  "legend": {
    "x": 10
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

那么...为什么这个基本示例不适用于 Highstock 但适用于 Highcharts？

提前致谢，

Answer 1

对于 highstock 时间应该以毫秒为单位

new Date(2013, 11, 18).getTime()

  Highcharts.stockChart('container', {
  "exporting": {
    "enabled": false
  },
  "rangeSelector": {
    "inputEnabled": true
  },
  "chart": {
    "type": "line",
    "renderTo": "container",
    "backgroundColor": "#fff",

  },
  "title": {
    "text": "30 DAY GOLD PRICE CHART"
  },
  "scrollbar": {
    "liveRedraw": false
  },
  "subtitle": {
    "text": "www.gold-feed.com"
  },
  "series": [{
    "name": "Open",
    "data": [{
      "x": new Date(2013, 11, 18).getTime(),
      "y": 1233.7
    }, {
      "x": new Date(2013, 11, 19).getTime(),
      "y": 1224.77
    }, {
      "x": new Date(2013, 11, 20).getTime(),
      "y": 1193.18
    }],
    "index": 0
  }, {
    "name": "High",
    "data": [{
      "x": new Date(2013, 11, 18).getTime(),
      "y": 1244.46
    }, {
      "x": new Date(2013, 11, 19).getTime(),
      "y": 1226.38
    }, {
      "x": new Date(2013, 11, 20).getTime(),
      "y": 1207.37
    }],
    "index": 1
  }, {
    "name": "Low",
    "data": [{
      "x": new Date(2013, 11, 18).getTime(),
      "y": 1216.24
    }, {
      "x": new Date(2013, 11, 19).getTime(),
      "y": 1187.18
    }, {
      "x": new Date(2013, 11, 20).getTime(),
      "y": 1191.35
    }],
    "index": 2
  }, {
    "name": "Close",
    "data": [{
      "x": new Date(2013, 11, 18).getTime(),
      "y": 1218.23
    }, {
      "x": new Date(2013, 11, 19).getTime(),
      "y": 1187.76
    }, {
      "x": new Date(2013, 11, 20).getTime(),
      "y": 1202.09
    }],
    "index": 3
  }],
  "credits": {
    "text": "Gold Feed Inc.",
    "href": "http://www.gold-feed.com"
  },
  "xAxis": {
    "title": {
      "text": null
    },
    "labels": {
      "rotation": null
    },
    "type": "datetime"
  },
  "yAxis": [{
    "title": {
      "text": "Price Per Troy Ounce"
    }
  }],
  "navigator": {
    "adaptToUpdatedData": false
  },
  "legend": {
    "x": 10
  }
})

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

无法将多个系列添加到 Highstock，但同样适用于 Highcharts

Cannot add multi series to Highstock but same thing works for Highcharts

javascript

charts

highcharts

highstock