amchart 图表设置

官网：https://www.amcharts.com/demos/

属性介绍：https://docs.amcharts.com/3/javascriptcharts/AmLegend

安装

bower install amcharts3

npm install amcharts/amcharts3、

<link rel="stylesheet" href="scripts/lib/amcharts3/amcharts/plugins/export/export.css"/> <!--amchart--> <script src="scripts/lib/amcharts3/amcharts/amcharts.js"></script> <script src="scripts/lib/amcharts3/amcharts/serial.js"></script> //折线图 柱状图 <script src="scripts/lib/amcharts3/amcharts/pie.js"></script> //饼图 <script src="scripts/lib/amcharts3/amcharts/plugins/export/export.min.js"></script> <script src="scripts/lib/amcharts3/amcharts/themes/light.js"></script>

基础用法

<div id="chartdiv" class="chart"></div> AmCharts.makeChart("chartdiv", { "type": "serial", "theme": "light", "colors": [ "#78eeff", "#ff5dfd", "#a970ff", "#1b9cff", "#38cf91", "#eaf135", "#ff8625", "#ff5555" ], "fontSize": 12, "dataProvider": lineRowCallDropRateData, //值 "sequencedAnimation": false, //设置图表没有动画 "startDuration": 0.5, "graphs": [{ "balloonText": "Profit: <b>[[value]]</b>", "title": "Profit", "valueField": "Profit", //柱状图 值的来源键名 "fillAlphas": 0.9, "lineAlpha": 0.2, "type": "column", //柱状图 "labelText": "[[value]]", //柱状图上显示值 "color": "#fff", //柱状图上显示值的颜色 animationPlayed: true //柱状图没有动画 }], "chartCursor": { "cursorAlpha": 0 }, "categoryField": "category", "valueAxes": [{ "axisThickness": 1, "axisAlpha": 1, "gridAlpha": 0.4, //平行X轴的图表内线条粗细 "gridColor": "#596F79", "position": "left", "axisColor": "#56707C", //Y轴线颜色 "color": "#90a4aa", //Y轴字体 minimum: 0 }], "categoryAxis": { "gridPosition": "start", "axisAlpha": 1, "fillAlpha": 0.05, "gridAlpha": 0, "axisColor": "#56707C", //X轴线颜色 "color": "#90a4aa", //X轴字体 gridCount: lineRowCallDropRateData.length, autoGridCount: false, labelRotation: 40 //标签的倾斜角度 }, "export": { "enabled": true }, "legend": { "enabled": true, "color": "#fff", "useGraphSettings": true, "position": "top", "align": "right", "valueWidth": 0, "fontSize": 12, //图表右上角 线段文字大小 "markerSize": 16 } })

动画

• "sequencedAnimation": false, //设置图表没有动画
• startDuration: 0, //设置饼图没有动画

valueAxes(Y轴)

• gridAlpha: 0    //网格透明度

• "axisColor": "#56707C",  //Y轴线颜色

• "color": "#90a4aa",  //Y轴字体

• "gridAlpha": 0.4,   //平行X轴的图表内线条粗细

categoryAxis(X轴)

• fillAlpha:0.05    //折线图 图形后边的 背景，默认是透明颜色，不会出现看似柱状图的背景

• gridCount:10     //标签个数--可自定义为值数组的长度

• autoGridCount: false, //是否允许自动设置X轴标签

• labelRotation: 40 //标签的倾斜角度

• 设置X轴的标签样式：

  labelFunction: function (value, valueText, valueAxis) { if (value) { return $filter('date')(new Date(value), 'MMM yyyy'); } }

graphs（图形）：[{}]

{ "balloonText": oneTechnology.DisplayName + ": <b>[[value]]</b>", "bullet": graphType, //折线图中折点显示图标 "bulletSize": 7, "title": oneTechnology.DisplayName, "valueField": oneTechnology.DisplayName, "fillAlphas": 0, "lineThickness": 3, //折线的粗细程度 "animationPlayed": true, hidden: true, //折线是否可见 visibleInLegend: false //图例是否可见 }

• "bullet": "none" "round" "square",
• "bulletSize": 5   //折线图是否有折点，显示多大
• "animationPlayed": true   //出现柱状图/折线图时没有动画
• "type": "column",   //柱状图"
• labelText": "[[value]]",   //柱状图上显示值
• "color": "#fff",   //柱状图上显示值的颜色
• hidden: true,   //折线是否可见
• visibleInLegend: false   //图例是否可见

饼图标签显示

"labelsEnabled": false   //饼图上不显示标签：

设置饼图显示标签样式：

"labelFunction": function (value, valueText, valueAxis) {
return parseFloat(value.percents).toFixed(1) + '%'
}

图表图例

"legend": { "enabled": true, "color": "#fff", "useGraphSettings": true, "position": "top", "fontSize": fontSize, // 图例字体大小 "align": "right", markerSize: markerSize // 图例图标大小 equalWidths:false, //图例是否保持等宽 "valueWidth": 0, //值显示的宽度，等于0时不显示值 }

当数据需定时刷新时，只是刷新数据而不是刷新图表

首先简单创建一个图表： var loadComplainChart = AmCharts.makeChart("chartcomplaindiv", { "theme": "dark", "type": "serial", "colors": [ "#00FCFC" ], "dataProvider": dailyUserComplain, } 当数据在刷新变化时，只需要改变data就可以了： loadComplainChart.dataProvider = dailyUserComplain; loadComplainChart.validateData(); 当设置只刷新数据时，会发现之前设置的X轴标签样式会失效，这时我们需要重新定义X轴标签的个数以及是否需要自动显示X轴标签： loadComplainChart.categoryAxis.autoGridCount = false; loadComplainChart.categoryAxis.gridCount = dailyUserComplain.length;