设置全局线条样式 - Amchart

Question

我有一个函数，在amcahrt中创建了一个系列行。

在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>