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;