如何在reactjs Highcharts中对齐图例

Question

你好，上面是我正在输出的图像，但是我希望输出是下面的图像：

我希望所有的1.1一起放在一行中，所有1.2一起放在一行中，而所有1.3和1.4放在一行中。我已经将所有这些数据存储在map中，并以方式应用循环，其中map是所有条目的映射，而xlabels是用于绘制图形的标签。

 for (const entries of map.entries()) {
        for (const values of entries[1].entries()) {
            var dataValue = [] // array
        for (const entry of values[1].entries()) {
          for (var key in labelMap) {
            if (key === entry[0]) {

              dataValue.push(entry[1])
            }
          }

        }

    seriesDataValue.push(
        {
          name: entries[0] +" "+values[0],
          data: dataValue,  
        })
     }
     this.setState({
        options: {
       series: seriesDataValue,
          responsive: {
            rules: [{
              condition: {
                maxWidth: 500
              },
              chartOptions: {
                legend: {
                  layout: 'vertical',
                  align: 'center',
                }
              }
            }]
          },
          legend: {
            layout: 'horizontal',
           align: 'center',
           verticalAlign: 'bottom',
          width:800,

        },
          xAxis: {

            categories: xlabels
          },
        }
      });

[有人可以帮我获得输出吗？谢谢

Answer 1

例如，您需要使用index属性以正确的顺序排列系列：

series: [{
  name: '1.1 wjEE',
  data: [1],
  index: 0
}, {
  name: '1.1 w DOTNET',
  data: [1],
  index: 4
}, {
  name: '1.1 i J2EE',
  data: [1],
  index: 8
}, {
  name: '1.2 wjEE',
  data: [1],
  index: 1
}, ...]

---

实时演示： http://jsfiddle.net/BlackLabel/6m4e8x0y/4893/

API参考： https://api.highcharts.com/highcharts/series.column.index