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

});

我尝试添加课程的两颗子弹是＆＃34; icon＆＃34;和＆＃34;确定＆＃34;。我知道amCharts中有文档，但它没有提供任何示例。有人可以给我一个例子吗？

Answer 1

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

即：

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

在数据中：

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

现在，该图表将应用硬编码的类名称＆＃34; amcharts-graph-bullet＆＃34;和自定义类名称，例如＆＃34; icon＆＃34;：

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

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

请注意，为了使上述功能正常工作，需要启用addClassNames设置。您已经在代码中设置了这一组，只是值得为其他人提及，寻找类似的解决方案。

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

1 个答案: