Highcharts覆盖系列数据对象的X或Y轴键

时间:2017-04-28 14:44:22

标签: javascript highcharts

在高图文档的示例中,我看到您可以像这样定义数据:

[{ x: 100, y: 3}, { x: 105, y: 4} ...]

但我有这样的非标准键:

[{ myCustomXKey: 100, myCustomYKey: 3}, { myCustomXKey: 105, myCustomYKey: 4} ...]

当然必须有一种方法来使用我的自定义键而不是标准的" x"和" y",对吗?有人可以帮忙吗?

1 个答案:

答案 0 :(得分:-1)

您可以像这样更新数据系列



var dataServer = [{
  myCustomXKey: 100,
  myCustomYKey: 3,
  myCustomZKey: 4
}, {
  myCustomXKey: 105,
  myCustomYKey: 4,
  myCustomZKey: 5
}, {
  myCustomXKey: 110,
  myCustomYKey: 5,
  myCustomZKey: 6
}, {
  myCustomXKey: 120,
  myCustomYKey: 6,
  myCustomZKey: 7
}]

function initialize(dataServer) {

  //suppose you need x,y,z data 
  var dataH = [];//creating array for chart
  for (var i = 0; i < dataServer.length; i++) {
    /*pushing objects into array*/
    dataH.push({
      x: dataServer[i].myCustomXKey,
      y: dataServer[i].myCustomYKey,
      z: dataServer[i].myCustomZKey
    })
  }

  Highcharts.chart('container', {

    chart: {
      type: 'bubble',
      plotBorderWidth: 1,
      zoomType: 'xy'
    },
    title: {
      text: 'update chart data from server data'
    },

    series: [{
      data: dataH //add the variable here
    }]

  });
}
initialize(dataServer)
&#13;
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
&#13;
&#13;
&#13;