如何解决如何:使用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'));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。