设置全局线型 - Amchart答案

【问题标题】：Setting global line styles - Amchart设置全局线型 - Amchart
【发布时间】：2020-05-13 08:59:00
【问题描述】：

我有一个在 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

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

【问题讨论】：

标签： charts styles amcharts amcharts4

【解决方案1】：

您可以创建一个custom theme 来自动应用所需的样式，如下所示：

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>

【讨论】：