Question

玩弄任何图表并做出反应。单独使用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", 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配置，但这些配置似乎都不起作用。

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

           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图表的颜色

1 个答案: