设置全局线安查特

Question

我有一个函数，可以在amcahrt中创建一条系列线。

在我有以下几行

let bullet = series.bullets.push(new am4charts.CircleBullet())
bullet.circle.stroke = am4core.color('#fff')
bullet.circle.radius = 5
series.strokeWidth = 2

我想将它们设置在全局图表上，而不是在系列线级别设置，因为它们将始终相同。

这张图表是否有一些全局选项，所以我可以做类似的事情

mychart.series.strokeWidth = 2

您可能希望设置单独的笔触宽度，但恕我直言，正常的用例是使它们都具有相同的宽度。

Answer 1

您可以创建自定义主题以自动应用所需的样式，如下所示：

function am4themes_myTheme(target) {
if (target instanceof am4charts.CircleBullet && target.circle) {
target.circle.stroke = am4core.color("#fff");
target.circle.radius = 5;
}
if (target instanceof am4charts.LineSeries) {
target.strokeWidth = 2;
} 
}
am4core.useTheme(am4themes_myTheme);

之后您需要做的就是创建系列和项目符号实例，属性将自动设置。

下面的演示：

am4core.useTheme(am4themes_animated);
function am4themes_myTheme(target) {
if (target instanceof am4charts.CircleBullet && target.circle) {
target.circle.stroke = am4core.color("#fff");
target.circle.radius = 5;
}
if (target instanceof am4charts.LineSeries) {
target.strokeWidth = 2;
} 
}
am4core.useTheme(am4themes_myTheme);
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"date": new Date(2018, 0, 1),
"value": 450,
"value2": 362,
"value3": 699
}, {
"date": new Date(2018, 0, 2),
"value": 269,
"value2": 450,
"value3": 841
}, {
"date": new Date(2018, 0, 3),
"value": 700,
"value2": 358,
"value3": 800
}, {
"date": new Date(2018, 0, 4),
"value": 490,
"value2": 367,
"value3": 700
}];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
function createSeries(field, name) {
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "date";
series.name = name;
series.tooltipText = "{dateX}: [b]{valueY}[/]";

var bullet = series.bullets.push(new am4charts.CircleBullet());

return series;
}
createSeries("value", "Series #1");
createSeries("value2", "Series #2");
createSeries("value3", "Series #3");
chart.legend = new am4charts.Legend();
chart.cursor = new am4charts.XYCursor();

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>