我必须将标签文本更改为绿色和红色。我们可以使用java script amcharts更改标签的颜色。并且可以在标签文本之后添加向上箭头。请检查下面的代码。
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [],
"type": "serial",
"theme": "light",
"categoryField": "name",
"rotate": true,
"startDuration": 1,
"startEffect":"easeOutSine",
"columnSpacing": 0,
"autoMargins": false,
"marginBottom": 0,
"pullOutRadius": 0,
"categoryAxis": {
"inside": true,
"gridPosition": "start",
"gridAlpha": 0,
"axisAlpha": 0,
"tickPosition": "start",
"tickLength": 0,
"position": "left"
},
"trendLines": [],
"graphs": [
{
"balloonText": " [[name]]: $[[amt]]<br> Index: [[Index]]",
"fillAlphas": 0.8,
"fillColorsField": "color1",
"id": "AmGraph-12",
"lineAlpha": 0.2,
"title": "amt",
"type": "column",
"valueField": "value",
"showHandOnHover":true,
"labelText": "[[Index]]",
"labelPosition": "right",
"fixedColumnWidth": 15
},
{
"balloonText": " [[name]]: $[[amt1]]",
"fillAlphas": 0.8,
"fillColorsField": "color",
"id": "AmGraph-22",
"lineAlpha": 0.2,
"title": "amt",
"type": "column",
"valueField": "value1",
"showHandOnHover":true,
"fixedColumnWidth": 15
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"axisAlpha": 0,
"gridAlpha": 0,
"labelsEnabled": false,
"minimum":0
}
],
"allLabels": [],
"balloon": {
"fillColor": "#000000",
"color": "#ffffff",
"fillAlpha": 1.0,
"offsetX": 0,
"offsetY": 0,
"horizontalPadding":0,
"maxWidth":100
},
"titles": [],
"export": {
"enabled": true
}
} );
请建议我如何实现这一点。还要检查这个JsFiddle
答案 0 :(得分:3)
您可以使用图表对象中的color
属性设置标签颜色:
"graphs": [{
// ...
"color": "#008000",
"labelText": "[[Index]]"
},
如果您需要为每个列指定它,则必须在数据中设置颜色并使用labelColorField
来访问它。如果您有color
属性集,如果特定数据元素没有关联的labelColorField
属性,它将回退到该颜色。
"dataProvider": [{
// ...
"labelColor": "#880000",
"name": "Name1",
"value": "148773.88",
"value1": "60794.55"
}, // ...
]
"graphs": [{
// ...
"color": "#008000",
"labelColorField": "labelColor",
"labelText": "[[Index]]"
},
再次修改
您可以通过插入unicode转义字符串来添加箭头。例如,向上箭头为\ u02191,向下箭头为\ u02193。
例如:
"labelText": "[[value]] \u02191",
如果您需要动态执行此操作,则需要设置labelFunction
并找出确定使用哪个箭头的方法。检查其文档并找出使用它进行设置的最佳方法。
答案 1 :(得分:2)
我希望文档更加清晰,但是您可以使用嵌套属性更改标签颜色,以便:
chart.labels.template.fill = am4core.color("white");
这将定位您的标签并更改其颜色。
答案 2 :(得分:0)
因为我的图表背景颜色是白色,所以我需要将字体颜色设为深色:
xAxis.renderer.labels.template.fill = am4core.color('#000000');
yAxis.renderer.labels.template.fill = am4core.color('#000000');