amchart 圖表設置

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

屬性介紹：https://docs.amcharts.com/3/javascriptcharts/AmLegend

安裝

bower install amcharts3

npm install amcharts/amcharts三、

<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;