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

玩弄任何图表并做出反应。仅使用anychart，根据教程和指南，我在普通javascript中设置了我希望的区域颜色。但是react使用某种类型的json配置程序

我想转换：

进入这种类型的反应

我已经尝试了许多不同的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}/>

var数据图表=[1,2][3,4]，[5,6]] 变量图表1\u设置={ id:“Aera图表1”， 宽度：“100%”， 背景：'透明'， 身高：600， 类型：'区域'， data:data_chart.map（（i）=>{return{x:i[0]，value:i[1]}）， 标签：{ 文本：“”， 宽度：“100%”， 高度：“100%”， fontSize:'45px'， fontColor:#fff“， 哈利恩：“中心”， vAlign：“中间” }, 标题：{ 文本：“”， fontColor:#fff“， fontWeight:“粗体” } };

---

基本上，我想更改面积图的填充。我应该在哪里添加：填充：“红色”

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

//创建一个数据集
var data=anychart.data.set([
[“一月”，12000，10000]，
[“二月”，15000，12000]，
[“三月”，16000018000]，
[“四月”，15000，11000]，
[“五月”，140009000]
]);
//映射数据
var seriesData_1=data.mapAs（{x:0，值：1}）；
var seriesData_2=data.mapAs（{x:0，值：2}）；
//创建图表
var chart=anychart.area（）；
//设置交互模式
chart.interactivity（）.hoverMode（“单一”）；
//创建第一个系列，设置数据和名称
var series1=图表面积（seriesData_1）；
系列1.名称（“2004”）；
//配置第一个系列的视觉设置
序列1.normal（）.fill（#00cc99“，0.3）；
系列1.悬停（）.填充（“00cc99”，0.1）；
系列1.选定（）.填充（“00cc99”，0.5）；
序列1.正常（）；
系列1.悬停（）.笔划（#00cc99），2，“10 5”，“圆形”）；
系列1.选定（）.笔划（#00cc99），4，“10 5”，“圆形”）；
//创建第二个系列，设置数据和名称
var series2=图表面积（seriesData_2）；
系列2.名称（“2005”）；
//配置第二个系列的视觉设置
序列2.正常（）；
系列2.悬停（）填充（#0066cc），0.1）；
系列2.选定（）.填充（#0066cc），0.5）；
series2.normal（）.hatchFill（“前对角线”，“#0066cc”，1,15）；
series2.hovered（）.hatchFill（“前对角线”，“#0066cc”，1,15）；
series2.selected（）.hatchFill（“前对角线”，“#0066cc”，1,15）；
序列2.normal（）.stroke（“#0066cc”）；
序列2.悬停（）笔划（#0066cc“，2）；
序列2.所选（）笔划（#0066cc“，4）；
//设置轴的标题
chart.xAxis（）.标题（“月份”）；
chart.yAxis（）.title（“销售额，$”；
ReactDOM.render(
，document.getElementById（'root'）；

谢谢您的回答。您使用什么导入语句导入任何图表？如果您已经有了从“AnyChart react”导入AnyChart的

功能，是否是从“AnyChart”导入AnyChart的
功能？这两种功能都是在react应用程序中工作所必需的。有关详细信息，请查看react中的基本样本-
           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}/>

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