使数据值标签变小和加粗的amcharts

时间:2018-10-19 16:11:25

标签: javascript html charts amcharts

我正在使用amcharts绘制2条线,以使数据值标签加粗和变小,我正在尝试类似的事情:

                            "labelSize":0.5,
                            "labelBold":true,

但是它不起作用,这是我的代码:

               AmCharts.makeChart("chartdiv", {
                    "backgroundColor": 'blue',
                    "theme": "light",
                    "type": "serial",
                    "zoomOutText": '',
                    "color": "black",
                    "dataDateFormat": "HH:NN",
                    "legend": {
                "useGraphSettings": true
            },
                    "dataProvider": chartData,
                    "valueAxes": [{
                            "id": "v1",
                            "position": "left",
                            "axisColor": "#472F52",
                            "title": "Time of the Day",
                            "type": "date",
                            "axisThickness": 2,
                            "markPeriodChange": false,
                            "autoGridCount": false,
                            "minimumDate": "00:00",
                            "maximumDate": "23:00",                                
                            "gridCount": 20,
                            "minPeriod": "ss",                              
                        }

                    ],
                    "startDuration": 1,
                    "graphs": [{
                            "lineAlpha": 0.9,
                            "type": "line",
                            "lineThickness": 1.5,
                            "bullet": "round",
                            "lineColor": "#0D338C",
                            "bulletBorderColor": "#0D338C",
                            "bulletBorderThickness": 0.2,
                            "bulletBorderAlpha": 0.5,
                            "valueField": "expectedEndTime",
                            "title": "Expected End Time",           
                            "dateFormat": "HH:NN",
                            "labelPosition": "top",
                            "labelColor": "red",
                            "valueAxis": "v1",
                            "labelText": "[[labelExpected]]",
                            "labelSize":0.5,
                            "labelBold":true,
                            "balloonText": "Estimated End Time : <b>[[value]]</b>"
                        },
                        {
                            "lineAlpha": 0.9,
                            "type": "line",
                            "lineThickness": 1.5,
                            "lineColor": "#C63F05",
                            "bullet": "round",
                            "bulletBorderColor": "#C63F05",
                            "bulletBorderThickness": 0.2,
                            "bulletBorderAlpha": 0.5,
                            "valueField": "actualEndTime",
                            "title": "Actual End Time",
                            "dateFormat": "HH:NN",
                            "labelPosition": "bottom",
                            "labelColor": "blue",
                            "valueAxis": "v1",
                            "labelText": "[[labelActual]]",
                            "balloonText": "Actual End Time : <b>[[value]]</b>"
                        }
                    ],
                    "chartCursor": {
                        "categoryBalloonDateFormat": "DD",
                        "cursorAlpha": 0.1,
                        "cursorColor": "#000000",
                        "fullWidth": true,
                        "valueBalloonsEnabled": true,
                        "zoomable": false
                    },
                    "categoryField": "batchName",
                    "categoryAxis": {
                        "gridPosition": "start",
                        "axisThickness": 2,                         
                        "axisColor": "#472F52",
                        "autoGridCount": false,
                        "gridCount": 1000,
                        "title": "Batches",
                        "labelRotation": 30
                    },
                    "export": {
                        "enabled": true,
                        "borderRadius": "10px",
                        "text-align": "center",
                        "pdfMake": {
                            "content": ["'<Name of the Metric to be displayed dynamically>'",
                                "                     ", "from <startDate> To <endDate>", {
                                    "image": "reference", //exported image
                                    "fit": [523.28, 769.89]
                                }
                            ]
                        },
                        "legend": {
                            "position": "bottom", // or "right", "bottom" and "left" are possible
                            "width": 200, // optional
                            "height": 200 // optional
                        }
                    }
                });

这里是 My JsFiddle

我需要:

  1. 以较小的粗体字体显示数据标签(当前以默认字体显示)。

  2. 设置数据标签的位置-避免两个值标签发生冲突(例如6:18和4:32)。

对于这两项的任何建议,将不胜感激!

0 个答案:

没有答案