如何：使用 JsonConfiguration 在 ReactJS 中使用 AnyChart.js 更改 aera 图表的颜色

Question

摆弄任何图表并做出反应。单独使用任何图表，按照教程和指南，我设法在正常 javascript 范围内按照我的意愿设置区域颜色。但是 React 使用某种类型的 json 配置器。

我要转换this:

anychart.onDocumentReady(function () {

    // create a data set
    var data = anychart.data.set([
      ["January", 12000, 10000],
      ["February", 15000, 12000],
      ["March", 16000, 18000],
      ["April", 15000, 11000],
      ["May", 14000, 9000]
    ]);

    // map the data
    var seriesData_1 = data.mapAs({x: 0, value: 1});
    var seriesData_2 = data.mapAs({x: 0, value: 2});

    // create a chart
    var chart = anychart.area();

    // set the interactivity mode
    chart.interactivity().hoverMode("single");

    // create the first series, set the data and name
    var series1 = chart.area(seriesData_1);
    series1.name("2004");

    // configure the visual settings of the first series
    series1.normal().fill("#00cc99", 0.3);
    series1.hovered().fill("#00cc99", 0.1);
    series1.selected().fill("#00cc99", 0.5);
    series1.normal().stroke("#00cc99", 1, "10 5", "round");
    series1.hovered().stroke("#00cc99", 2, "10 5", "round");
    series1.selected().stroke("#00cc99", 4, "10 5", "round");

    // create the second series, set the data and name  
    var series2 = chart.area(seriesData_2);
    series2.name("2005");

    // configure the visual settings of the second series
    series2.normal().fill("#0066cc", 0.3);
    series2.hovered().fill("#0066cc", 0.1);
    series2.selected().fill("#0066cc", 0.5);
    series2.normal().hatchFill("forward-diagonal", "#0066cc", 1, 15);
    series2.hovered().hatchFill("forward-diagonal", "#0066cc", 1, 15);
    series2.selected().hatchFill("forward-diagonal", "#0066cc", 1, 15);
    series2.normal().stroke("#0066cc");
    series2.hovered().stroke("#0066cc", 2);
    series2.selected().stroke("#0066cc", 4);

    // set the chart title
    chart.title("Area Chart: Appearance");

    // set the titles of the axes
    chart.xAxis().title("Month");
    chart.yAxis().title("Sales, $");

    // set the container id
    chart.container("container");

    // initiate drawing the chart
    chart.draw();
});

进入这种类型的反应 json config

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

我已经尝试了许多不同的 JSON 配置，其中 none 似乎有效。

最接近我开始工作的是非常简单的图表，没有额外的设置和默认填充：

           var data_chart= [[1,2][3,4],[5,6]]
           var chart1_settings = {
                id: "Aera chart 1 ",
                width: "100%",
                background:'transparent',
                height: 600,
                type: 'area',
                data: data_chart.map( (i)=> {return {x: i[0], value: i[1]} } ),          
                label: {
                    text: '',
                    width: "100%",
                    height: "100%",
                    fontSize: '45px',
                    fontColor: "#fff",
                    hAlign: 'center',
                    vAlign: 'middle'
                },
                title: {
                    text: '',
                    fontColor: "#fff",
                    fontWeight: 'bold'
                 }
            };

<AnyChart {...chart1_settings}/>

基本上我想改变面积图的填充。我应该在哪里添加：fill: 'red' !?

Answer 1

JSON 配置不包括所有可能的设置。对于复杂的设置，我们建议使用实例方法。使用这种方法，您可以访问整个库 API 并可以应用您需要的任何设置。像这样：

// create a data set
    var data = anychart.data.set([
      ["January", 12000, 10000],
      ["February", 15000, 12000],
      ["March", 16000, 18000],
      ["April", 15000, 11000],
      ["May", 14000, 9000]
    ]);

    // map the data
    var seriesData_1 = data.mapAs({x: 0, value: 1});
    var seriesData_2 = data.mapAs({x: 0, value: 2});

    // create a chart
    var chart = anychart.area();

    // set the interactivity mode
    chart.interactivity().hoverMode("single");

    // create the first series, set the data and name
    var series1 = chart.area(seriesData_1);
    series1.name("2004");

    // configure the visual settings of the first series
    series1.normal().fill("#00cc99", 0.3);
    series1.hovered().fill("#00cc99", 0.1);
    series1.selected().fill("#00cc99", 0.5);
    series1.normal().stroke("#00cc99", 1, "10 5", "round");
    series1.hovered().stroke("#00cc99", 2, "10 5", "round");
    series1.selected().stroke("#00cc99", 4, "10 5", "round");

    // create the second series, set the data and name  
    var series2 = chart.area(seriesData_2);
    series2.name("2005");

    // configure the visual settings of the second series
    series2.normal().fill("#0066cc", 0.3);
    series2.hovered().fill("#0066cc", 0.1);
    series2.selected().fill("#0066cc", 0.5);
    series2.normal().hatchFill("forward-diagonal", "#0066cc", 1, 15);
    series2.hovered().hatchFill("forward-diagonal", "#0066cc", 1, 15);
    series2.selected().hatchFill("forward-diagonal", "#0066cc", 1, 15);
    series2.normal().stroke("#0066cc");
    series2.hovered().stroke("#0066cc", 2);
    series2.selected().stroke("#0066cc", 4);

    // set the titles of the axes
    chart.xAxis().title("Month");
    chart.yAxis().title("Sales, $");

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

如何：使用 JsonConfiguration 在 ReactJS 中使用 AnyChart.js 更改 aera 图表的颜色

How to: Changing color of aera chart with AnyChart.js in ReactJS using JsonConfiguration

javascript

reactjs

anychart