更改项目符号颜色 (amCharts)答案

【问题标题】：Change bullet color (amCharts)更改项目符号颜色 (amCharts)
【发布时间】：2020-02-16 19:32:27
【问题描述】：

尝试更改图表中的项目符号颜色，但不知道如何更改。文档说颜色应该继承，但它没有这样做？

演示：

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";

/* Create value axis */
var theYAxis = chart.yAxes.push(new am4charts.ValueAxis());
theYAxis.renderer.labels.template.disabled = true;
theYAxis.renderer.grid.template.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.bullets.push(new am4charts.CircleBullet());
series1.stroke = "#ffbb00";
series1.bullets.stroke = am4core.color("#ffbb00");
series1.bullets.fill = am4core.color("#ffbb00");

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>

我只是想让蓝色的子弹变成黄色，就像中风一样。

【问题讨论】：

series1.fill = "#ffbb00"; ==> 这使得项目符号填充与图形线相同的颜色

标签： javascript amcharts amcharts4

【解决方案1】：

series.bullets 是一个列表，你不能直接在它上面设置视觉属性。您需要从 new am4charts.CircleBullet() 创建的项目符号对象； AmCharts 网站上的演示使用 push 的返回值并从那里开始：

var bullet = series1.bullets.push(new am4charts.CircleBullet());
series1.stroke = "#ffbb00";
bullet.stroke = am4core.color("#ffbb00");
bullet.fill = am4core.color("#ffbb00");

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";

/* Create value axis */
var theYAxis = chart.yAxes.push(new am4charts.ValueAxis());
theYAxis.renderer.labels.template.disabled = true;
theYAxis.renderer.grid.template.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";

var bullet = series1.bullets.push(new am4charts.CircleBullet());
series1.stroke = "#ffbb00";
bullet.stroke = am4core.color("#ffbb00");
bullet.fill = am4core.color("#ffbb00");

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>

【讨论】：