有什么方法可以在 json 中传递多系列数据，因为它在 reactjs 的任何图表中都无法正常工作？

Question

我正在尝试在 React 中使用 AnyChart 实现柱形图，我在 JSON 中传递多系列数据，但它不起作用下面是一个简单的 JSON 结构，我需要知道如何在反应中传递多系列数据。

const complexSettings = {
  width: 800,
  height: 600,
  type: "column",
  data: "P1,5\nP2,3\nP3,6\nP4,4",
  title: "Column chart",
  yAxis: [
    1,
    {
      orientation: "right",
      enabled: true,
      labels: {
        format: "{%Value}{decimalPoint:\,}",
        fontColor: "red",
      },
    },
  ],
  legend: {
    background: "lightgreen 0.4",
    padding: 0,
  },
  lineMarker: {
    value: 4.5,
  },
};

const Demo = () => {
  return (
    <AnyChart id="sampleData" width={500} height={400} {...complexSettings} />
  );
};

export default Demo;

Answer 1

是的，这种特殊格式不支持多系列数据。为此，我们建议使用其他方法：

import React from 'react'
import ReactDOM from 'react-dom'
import AnyChart from '../../dist/anychart-react.min.js'
import anychart from 'anychart'

const data = anychart.data.set([
  ['p1', 5, 4],
  ['p2', 6, 2],
  ['p3', 3, 7],
  ['p4', 1, 5]
]);

// Render chart with settings
ReactDOM.render(<AnyChart type="column" title="Multicolumn chart" width={800} height={600} legend={true} />, document.getElementById('root'));
// Re-render with multicolumn data. No need to set type secondly, because it just updates data
ReactDOM.render(<AnyChart data={data}/>, document.getElementById('root'));

或者使用实例字段，这是最灵活的插件使用方式：

import React from 'react'
import ReactDOM from 'react-dom'
import AnyChart from '../../dist/anychart-react.min.js'
import anychart from 'anychart'

  const data = anychart.data.set([
    ['p1', 5, 4],
    ['p2', 6, 2],
    ['p3', 3, 7],
    ['p4', 1, 5]
  ]);

  var mapping1 = data.mapAs({x: 0, value: 1});
  var mapping2 = data.mapAs({x: 0, value: 2});

  const chart = anychart.column();

  chart.column(mapping1);
  chart.column(mapping2);

ReactDOM.render(
  <AnyChart
    width={800}
    height={600}
    instance={chart}
    title="Stock demo"
  />, document.getElementById('root'));

有关详细信息，请查看 the plugin page 上的样本。

有什么方法可以在 json 中传递多系列数据，因为它在 reactjs 的任何图表中都无法正常工作？

is there any way method to pass multiseries data in json as its not working normal way in anychart in reactjs?

javascript

reactjs

anychart