javascript - 在 highcharts 系列中传递 3 个值

Question

我有一个来自 Highcharts 的散点图，在 y 轴上我输入了“强度”值，在 x 轴上我输入了日期时间(月、日、年)。

chart: {
  type: 'scatter',
  zoomType: 'xy',
  renderTo: 'chartContainer'
},
rangeSelector: {
  enabled: true
},
xAxis: {
  title: {
    enabled: true
  },
  type: 'datetime',
  dateTimeLabelFormats:{
    month: '%e. %b %Y',
    year: '%b'
  },
  startOnTick: true,
  endOnTick: true,
  showLastLabel: true
},
yAxis: {
  title: {
    text: 'Intensity'
  },
  min: 0,
  max: 100
},
plotOptions: {
  scatter: {
    marker: {
      radius: 5,
      states: {
        hover: {
          enabled: true,
          lineColor: 'rgb(100,100,100)'
        }
      }
    },
    states: {
      hover: {
        marker: {
          enabled: false
        }
      }
    },
    events: {
      click: function(event) {

        showMoreData();


      }
    }
  }
},
series: [{
  name: 'Male',
  color: 'rgba(144,36,58, .8)',
  data: getDataParsed()
}]

这些数据是从另一个函数 getDataParsed() 加载的，我在其中执行 ajax GET 并获取多个数据。问题是我如何传递更多数据(还有强度和日期时间)，以便稍后在散点图中使用。

function getDataParsed() {

var serie = [];

var i=0;
dolorCollect.forEach(function (dato) {


var arr = dato.FECHA_INICIO.split("/");
var hour = dato.HORA_INICIO.split(":");

serie[i]=     [Date.UTC(arr[2],arr[1]-1,arr[0],hour[0],hour[1]),dato.INTENSIDAD_DOLOR];


i++;

});

return serie;

}

Answer 1

要在系列数据的每个数据点中获取更多数据，您可以:

1. 按照 Rahul Sharma 在评论中建议的方式进行操作 - 将数据点设置为具有命名属性的对象。更多信息API - 请参阅数据格式的第三种方式:

An array of objects with named values. The objects are point configuration objects as seen below. If the total number of data points exceeds the series' turboThreshold, this option is not available.

data: [{
    x: 1,
    y: 2,
    name: "Point2",
    color: "#00FF00"
}, {
    x: 1,
    y: 4,
    name: "Point1",
    color: "#FF00FF"
}]

或将数据设置为数组的数组 - 就像现在一样，但在点数组中包含更多数据。让 Highcharts 以正确的方式解码您的新格式集 keys .

因此可以使用如下代码设置相同的数据:

series:[{
  data: [
    [1, 2, "Point2", "#00FF00"], 
    [1, 4, "Point1", "#FF00FF"]
  ],
  keys: ['x','y','name','color'],
  ...