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

Question

Toying around with anychart and react. Using anychart alone, following tutorials and guides i managed to set colors of area as i wish within normal javascript. But react useses some type of json configurator.

I want to convert 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();
});

into this type of react 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
  }
};

I have tried out many different JSON configuration, none of those seem to work.

Closest I got to working was pretty simple chart with no extra settings and default fill:

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

Basically I want to change fill of the area chart . Where should I add : fill: 'red' !?

Answer 1

The JSON configuration doesn't include all possible settings. For complex settings, we recommend using instance approach. Using this approach you have access to the whole library API and can apply any settings you need. Like this:

// 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'));