reactjs - How to align the legends in reactjs Highcharts

Question

Hello , the above is the image I am getting output as , but I want the output as the below image:

I want all the 1.1 together in a line all the 1.2 in a line all the 1.3 and 1.4 in a line. I have stored all these data in a map , and applying loop as , where map is the map of all the entries and xlabels are the labels for plotting the graph.

 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
          },
        }
      });


        

Can someone please help me to get the output ? Thank you

标签： reactjshighcharts

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