Javascript 向amCharts中的项目符号添加自定义类
我正在尝试向自定义项目符号添加一个类名,以便使用CSS定位它。我还试图为自定义项目符号添加一个值。我想我没有把它设置在仪表js中:Javascript 向amCharts中的项目符号添加自定义类,javascript,amcharts,Javascript,Amcharts,我正在尝试向自定义项目符号添加一个类名,以便使用CSS定位它。我还试图为自定义项目符号添加一个值。我想我没有把它设置在仪表js中: var chart = AmCharts.makeChart("maint-good", { "type": "serial", "rotate": true, "theme": "light", "path": "http://www.amcharts.com/lib/3/", "autoMargins": false,
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中有这方面的文档,但它没有给出任何示例。有人能给我举个例子吗?您可以使用graph的属性指定数据中的哪个字段包含要应用于特定数据点的自定义类名 即: 在数据方面:
"dataProvider": [{
// ...
"icon": "assets/img/icons/maint_good.svg",
"iconClass": "icon",
// ...
}]
现在,图表将应用硬编码类名“amcharts graph bullet”和自定义类名,如“icon”:
现在,您可以使用CSS瞄准此特定项目符号:
.amcharts-graph-bullet.icon image {
/* your css here */
}
请注意,为了使上述功能正常工作,需要启用该设置。您的代码中已经有了这一集,尽管这对于其他人来说值得一提,但正在寻找类似的解决方案。谢谢您的帮助!如何将自定义类添加到图例中?仅仅在图表中添加类对我来说不起作用。
.amcharts-graph-bullet.icon image {
/* your css here */
}