不能将多系列添加到Highstock，但同样适用于Highcharts

时间：2017-12-08 21:09:28

标签： javascript charts highcharts highstock

我正在尝试创建一个包含2个系列的高价图表，如您在此fiddle及以下所示，未显示任何系列。

＆＃13;
＆＃13; 
  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
  }
})
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

如果我将Highcharts.stockChart替换为Highcharts.chart，则效果非常好，如fiddle及以下所示。

＆＃13;
＆＃13; 
  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
  }
})
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

那么......为什么这个基本的例子对Highstock不起作用，但对Highcharts有用吗？

提前致谢，

1 个答案:

答案 0 :(得分：0)

对于高库存时间应该是毫秒

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

＆＃13;
＆＃13; 
  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
  }
})
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题