在 highcharts 系列中传递 3 个值

Question

我有一个来自 Highcharts 的散点图，在 y 轴上我输入了 'Intensity' 值，在 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

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

按照 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'],
  ...

在 highcharts 系列中传递 3 个值

Pass 3 values in highcharts series

javascript

function

variables

highcharts

scatter-plot