Question

我正在使用高图绘制雷达图，并且我的输入数据有时可以包含多个值，因为在数据数组中可能是这样的数据= [[0.1,0,4,0.5,0.4]，[0.4,0,5]，0.3,0.4]。并且每当有多个值时，我需要箱线图而不是带有该数据点值数组摘要的数据。在海图中有可能吗？

这是一个jsfiddle https://jsfiddle.net/n9jts46q/

  Highcharts.chart('container', {

      chart: {
          height:400,
          width:600,
          polar: true,
          showAxes: true,
          type: 'line',
        },

     title: {
          text: 'Radar Chart',
          x: -80
        },

      pane: {
          size: '80%'
      },

      xAxis: {
          reversed: false,
          startOnTick: true,
          endOnTick: true,
          gridLineColor: '#a2aba0',
          categories :['Sales', 'Marketing', 'Development', 'Customer Support',
              'Information Technology', 'Administration', 'new'],
          tickmarkPlacement: 'on',
          labels: {
            useHTML:true,//set to true
            style:{
              width:'150px',
              whiteSpace:'normal'//set to normal
            },
            step: 1,
          },
          lineWidth: 0,
          align: 'center',
          x: 70,
          useHTML: true,
          style: {
            'white-space': 'normal',
            left: '0px',
            top: '0px',
            position: 'absolute'
          },
        },




   yAxis: {
          maxPadding: 0,
          reversed: false,
          startOnTick: true,
          endOnTick: true,
          gridLineColor: '#a2aba0',
          gridLineDashStyle: 'dash',
          gridLineInterpolation: 'circle',
          lineWidth: 1,
          tickPositions: [-1, 0, 1], 
          showLastLabel: false,
          labels:
          {
            enabled: false
          },
          plotBands: [{
            color: '#ffc0cb',
            from: 0,
            to: -1
          },{
            color: '#b8eab8',
            from: 0,
            to: 1
          }],
        },


  plotOptions: {
          series: {
            lineWidth: 1,
            connectEnds: true
          },
        },


      tooltip: {
          shared: false,
          pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y}</b><br/>'
        },

      legend: {
          align: 'right',
          verticalAlign: 'top',
          y: 70,
          layout: 'vertical'
      },

      series: [{
          name: 'Serie 1',
          data: [-0.1,-0.56, -0.45, -0.7, -0.4, -0.3,0.7],
          pointPlacement: 'on'
      }, {
          name: 'serie 2',
          data: [0.4, 0.4, 0.6,-0.3, 0.6, 0.23,-0.8],
          pointPlacement: 'on'
      }]

  });

但是当然，它的数据是一个数组。

Answer 1

默认情况下，在Highcharts中这是不可能的，您必须在Highcharts核心中进行一些更改。但是，您可以通过一种简单的方式将数据预处理为Highcharts所需的格式，例如：

var H = Highcharts,
  sum,
  data = {
    data1: [
      [-0.1, -0.56, -0.45],
      [-0.7, -0.4], 
      -0.3,
      0.7
    ],
    data2: [
      0.4,
      0.4, 
      [0.6, -0.3],
      0.6,
      0.23, 
      -0.8
    ]
  },
  processedData = {};

H.objectEach(data, function(el, k) {
  processedData[k] = [];
  H.each(el, function(point) {
    if (H.isArray(point)) {
      sum = 0;
      H.each(point, function(p) {
        sum += p;
      });
      processedData[k].push(sum)
    } else {
      processedData[k].push(point)
    }
  });
});

实时演示：https://jsfiddle.net/BlackLabel/to3c21gr/

带箱图的海图雷达图

1 个答案: