Question

所以我最近向Highcharts介绍了自己，并且确实在我的应用上创建了一个硬编码的虚拟图表。但是我遇到了专门针对LEGEND圈子进行主要布局的问题。所以这里是链接我从中获取代码+灵感： https://github.com/whawker/react-jsx-highcharts/blob/gh-pages/examples/Combo/App.js

这是我的一些代码:)

  render() {
    const pieData = [
      {
        name: "Jane",
        y: 17
      },
      {
        name: "John",
        y: 13
      },
      {
        name: "Joe",
        y: 20
      },
      {
        name: "Ivan",
        y: 50
      }
    ];

    return (
      <HighchartsChart>


        <Legend />

        <YAxis id="number">
          <PieSeries
            id="total-consumption"
            name="Total consumption"
            data={pieData}
            center={[300, 120]}
            size={255}
            showInLegend

          />
        </YAxis>
      </HighchartsChart>
    );

所以基本上是的，我需要传说从底部移动到右侧等，哦，以及我不知道如何操纵/显示值而不是图表本身上的名称。在此先感谢任何反馈和提示，敬上，维克多（一个混乱的实习生仍然）

Answer 1

据我所知，react-jsx-highcharts库的examples使用<Legend>组件有一些允许定位的道具。

例如在右边对齐它试试这个：

<Legend layout="vertical" align="right" verticalAlign="middle" />

文档似乎不完整，所以您最好的机会是查看示例或自己深入了解源代码，看看哪些道具可能对您有所帮助。

在大多数情况下，组件似乎将配置选项作为道具传递给Highcharts，因为它们是：

这个库的目的是使用React组件提供非常薄的Highcharts抽象。这是通过将Highcharts配置选项作为组件道具传递来实现的。

在绝大多数情况下，配置选项的名称和组件prop的名称是相同的。

具有React Legend位置的Highcharts等等

1 个答案: