在amCharts中为子弹添加自定义类

Question

我正在尝试将类名添加到自定义项目符号中,因此我可以使用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"
    }

});

我试图添加一个类的两个子弹是"icon"和"ok".我知道amCharts中有文档,但它没有提供任何示例.有人可以给我一个例子吗？

Answer 1

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

即:

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

在数据中:

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

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

现在,您可以使用CSS定位此特定项目:

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

请注意,为了使上述功能正常工作,addClassNames需要启用该设置.你已经在代码中设置了这个集合,只是值得为其他人提及,寻找类似的解决方案.