在 amCharts 中向项目符号添加自定义 class

Question

我正在尝试将 class 名称添加到自定义项目符号中，以便我可以使用 CSS 对其进行定位。我也在尝试为该自定义项目符号添加一个值。我不认为我在仪表 js 中设置正确:

var chart = AmCharts.makeChart("maint-good", {
    "type": "serial",
    "rotate": true,
    "theme": "light",
    "path": "http://www.amcharts.com/lib/3/",
    "autoMargins": false,
    "marginTop": 80,
    "marginLeft": 80,
    "marginBottom": 30,
    "marginRight": 50,
    "addClassNames": true,
    "dataProvider": [{
        "marginTop": 80,
        "category": "",
        "excelent": 20,
        "good": 20,
        "average": 20,
        "poor": 20,
        "bad": 20,
        "limit": 15,
        "full": 15,
        "bullet": 15,
        "icon": "assets/img/icons/maint_good.svg",
        "ok": "assets/img/icons/ok.svg"

    }],
    "valueAxes": [{
        "maximum": 20,
        "stackType": "regular",
        "gridAlpha": 0

    }],
    "startDuration": 1,
    "graphs": [{
        "columnWidth": 0.6,
        "lineColor": "#2F2F2F",
        "lineThickness": 22,
        "noStepRisers": true,
        "stackable": false,
        "type": "step",
        "valueField": "limit",
        "bulletSize": 95,
        "customBulletField": "icon"
    }, {
        "valueField": "full",
        "showBalloon": false,
        "type": "column",
        "lineAlpha": 0,
        "fillAlphas": 0.8,
        "fillColors": ["#2F2F2F", "#2F2F2F", "#2F2F2F"],
        "gradientOrientation": "horizontal"
    }, {
        "clustered": false,
        "columnWidth": 0.3,
        "fillAlphas": 1,
        "lineColor": "#8dc53e",
        "stackable": false,
        "type": "column",
        "valueField": "bullet",
        "customBulletField": "ok",
        "bulletSize": 95,

    }],
    "columnWidth": 1,
    "categoryField": "category",
    "categoryAxis": {
        "gridAlpha": 0,
        "position": "left",
        "display": "none"
    }

});

我要添加 class 的两个项目符号是 "icon" 和 "ok"。我知道 amCharts 中有这方面的文档，但它没有给出任何示例。有人可以给我举个例子吗？

Answer 1

您可以使用图形的属性 classNameField 来指定数据中的哪个字段包含要应用于特定数据点的自定义 class 名称。

即：

"graphs": [{
  // ... other graph settings
  "customBulletField": "icon",
  "classNameField": "iconClass"
}, ...

在数据中：

"dataProvider": [{
  // ...
  "icon": "assets/img/icons/maint_good.svg",
  "iconClass": "icon",
  // ...
}]

现在，图表将应用硬编码 class 名称 "amcharts-graph-bullet" 和自定义 class 名称，例如 "icon":

现在您可以使用 CSS:

瞄准这个特定的项目符号

.amcharts-graph-bullet.icon image {
  /* your css here */
}

请注意，为了使上述功能正常工作，需要启用 addClassNames 设置。您已经在您的代码中设置了该设置，尽管对于其他正在寻找类似解决方案的人来说值得一提。

在 amCharts 中向项目符号添加自定义 class

Adding a custom class to bullets in amCharts

javascript

amcharts