reactjs - 如何在 Highcharts Reactjs 中将图例组合在一起

Question

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

标签： reactjshighcharts

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'
  }]

工作演示在这里。

编辑答案：

您的问题似乎与“在两列 highcharts 中显示图例项”重复。

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

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

这会将图例拆分为两个单独的列：