如何在Highcharts Reactjs中将图例组合在一起[关闭]

Question

您好，上面是我将其作为输出的图像，但我希望输出看起来像下图，即一列中的所有蔬菜和一列中的所有水果，依此类推。我怎样才能实现它？ 谢谢 ：）

Answer 1

您可以使用 Highcharts 堆叠和分组柱形图。

它允许您通过数据分组设置不同类别的自定义列：

这里，每个系列的左栏是vegetables，左栏是fruits。

您的数据如下所示：

  series: [{
    name: 'Tomato',
    data: [5, 3, 4, 7, 2, 3, 5],
    stack: 'veg'
  }, {
    name: 'Potato',
    data: [3, 4, 4, 2, 5, 7, 2],
    stack: 'veg'
  }, {
    name: 'Onion',
    data: [3, 4, 4, 2, 5, 1, 4],
    stack: 'veg'
  }, {
    name: 'Apple',
    data: [2, 5, 6, 2, 1, 8, 1],
    stack: 'fruit'
  }, {
    name: 'Banana',
    data: [3, 0, 4, 4, 3, 4, 5],
    stack: 'fruit'
  }, {
    name: 'Orange',
    data: [3, 0, 4, 4, 3],
    stack: 'fruit'
  }]

Working demo here.

编辑答案：

您的问题似乎与“Display legend items in two columns highcharts”重复。

因此您可以添加到图表的配置中：

  legend: {
    width: 400,
    itemWidth: 200
  },

这会将图例分成两列：