我正在尝试更改正在使用的图形的网格线(和边框)颜色。我看过文档,但是只找到更改fill
的方法。看不到关于实际线条的任何内容。
Demo:
var chart = am4core.create("dataChart", am4charts.XYChart);
chart.data = [{
"xValue": "Q1",
"yValue": 3
}, {
"xValue": "Q2",
"yValue": 4
}, {
"xValue": "Q3",
"yValue": 7
}, {
"xValue": "Q4",
"yValue": 2
}, {
"xValue": "Q5",
"yValue": 9
}];
/* Create axes */
var theXAxis = chart.xAxes.push(new am4charts.CategoryAxis());
theXAxis.dataFields.category = "xValue";
theXAxis.renderer.minGridDistance = 30;
/* Create value axis */
var theYAxis = chart.yAxes.push(new am4charts.ValueAxis());
theYAxis.renderer.labels.template.disabled = true;
/* Create series */
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "yValue";
series1.dataFields.categoryX = "xValue";
series1.bullets.push(new am4charts.CircleBullet());
series1.tooltipText = "{valueY} / 10";
series1.fill = "#2c3e96";
series1.fillOpacity = .3;
series1.stroke = "#4967fa";
/* Create a cursor */
chart.cursor = new am4charts.XYCursor();
body{
background: grey;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="dataChart"></div>
我指的是那些深灰色的网格线。
是否有任何更改方法?
在axis renderer中,您可以访问轴的许多组件,例如标签,刻度线和,包括grid lines。您可以通过修改网格模板来更改网格线的颜色。
theXAxis.renderer.grid.template.stroke = "#ff0000";
theYAxis.renderer.grid.template.stroke = "#ff0000";
这也在Grid, labels and ticks section下的文档的轴概述中得到了说明。
关于边框,您需要在相关容器的背景上设置笔触(在本例中为plotContainer)。您可以找到有关使用容器的更多信息here
chart.plotContainer.background.stroke = "#ff0000";
var chart = am4core.create("dataChart", am4charts.XYChart);
chart.data = [{
"xValue": "Q1",
"yValue": 3
}, {
"xValue": "Q2",
"yValue": 4
}, {
"xValue": "Q3",
"yValue": 7
}, {
"xValue": "Q4",
"yValue": 2
}, {
"xValue": "Q5",
"yValue": 9
}];
/* Create axes */
var theXAxis = chart.xAxes.push(new am4charts.CategoryAxis());
theXAxis.dataFields.category = "xValue";
theXAxis.renderer.minGridDistance = 30;
theXAxis.renderer.grid.template.stroke = "#ff0000";
theXAxis.renderer.grid.template.strokeWidth = 2;
theXAxis.renderer.grid.template.strokeOpacity = .8; //make the change more visible for demo purposes
// base/zero line
theXAxis.renderer.baseGrid.stroke = "#ff0000";
/* Create value axis */
var theYAxis = chart.yAxes.push(new am4charts.ValueAxis());
theYAxis.renderer.labels.template.disabled = true;
theYAxis.renderer.grid.template.stroke = "#ff0000";
theYAxis.renderer.grid.template.strokeWidth = 2;
theYAxis.renderer.grid.template.strokeOpacity = .8; //make the change more visible for demo purposes
// base/zero line
theYAxis.renderer.baseGrid.stroke = "#ff0000";
//border around chart:
chart.plotContainer.background.stroke = "#ff0000";
/* Create series */
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "yValue";
series1.dataFields.categoryX = "xValue";
series1.bullets.push(new am4charts.CircleBullet());
series1.tooltipText = "{valueY} / 10";
series1.fill = "#2c3e96";
series1.fillOpacity = .3;
series1.stroke = "#4967fa";
/* Create a cursor */
chart.cursor = new am4charts.XYCursor();
body{
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="dataChart"></div>