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;