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

问题描述

玩弄任何图表并做出反应。单独使用anychart，按照以下教程和指南，我设法在普通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",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,"round");
    series1.selected().stroke("#00cc99",4,"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",15);
    series2.hovered().hatchFill("forward-diagonal",15);
    series2.selected().hatchFill("forward-diagonal",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配置，但这些配置似乎都不起作用。

我最近接触到的是非常简单的图表，没有任何额外的设置和默认填充：

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

<AnyChart {...chart1_settings}/>

基本上，我想更改面积图的填充。我应该在哪里添加：fill：'red'！？

解决方法

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

// create a data set
    var data = anychart.data.set([
      ["January",12000,10000],["February",15000,12000],["March",16000,18000],["April",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,"round");
    series1.selected().stroke("#00cc99",4,"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",15);
    series2.hovered().hatchFill("forward-diagonal",15);
    series2.selected().hatchFill("forward-diagonal",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'));