---
# System prepended metadata

title: Amcharts
tags: [amcharts]

---

###### tags: `amcharts`
# Amcharts
:::info

:::
### AmPieChart 圓餅圖
[![](https://i.imgur.com/wI6aZ4G.png)](https://codepen.io/katherineeeeee/pen/PyRbGJ)

```
"legend": {
    // "autoMargins": false,
    "position": "bottom",
    "useGraphSettings": false,
    "align": "center",
    "valueWidth": 50,
    "valueText": "[[percents]] %",
    "marginRight": 30,
    // "maxColumns": 2
    // "showEntries": false
    // "markerType":"circle"
    "markerLabelGap": 10
}
legend版面:
1. legend 類別標示:如果單位是金額,無法避免過多位數造成跑版,因此統一改成顯示
2. 若要調整 margin left/right,"autoMargins" 此參數須設成false。

pie版面:
1. 若要改pie chart的margin,直接寫行內margin-left

```

> How to used
```javascript=
makePieChart: function (element, displayData) {
    $('#' + element).html(''); 
    var opts = {
        "type": "pie", 
        "theme": "light",
        "dataProvider": displayData, // <---------塞資料
        "titleField": "name", // <---------塞"分類"
        "valueField": "value", // <---------塞"值"

        "legend": {
            "position": "right",
            "valueWidth": 150
        }
    };
    setTimeout(function () {
        AmCharts.makeChart(element, opts);
    }, 200);

}
<!-- HTML -->
<div id="chartdiv"></div>
```

> Data
```javascript=
[ 
    {
        "name": "預設", // <---------"分類"
        "value": 273 // <---------"值"
    }, 
    {
        "name": "高頻彩種",
        "value": 205
    },
    ...
]
```
## Init Params Options
| Params | Type | Default | Description |
| :--- | :---: | :--- | :--- | :--- |
| element | String |  | 放到哪個div
| displayData | Array[Object] |  | 圖形所需資料格式(上面的Data)
| type | String |  | 圖形類型
| titleField | String |  | 圓餅圖每一等份的標題
| valueField | String |  | 圓餅圖每一等份的值

## Legend Params Options 
| Params | Type | Default | Description |
| :--- | :---: | :--- | :--- | :--- |
| legend |  |  |圖表標示類別
| useGraphSettings | Boolean | false |圖例標記設置
| align | String | left |圖例條目的對齊方式
| valueWidth | Number | 50 |每一個條目的寬
[Legend 更多參數](http://docs.amcharts.com/3/javascriptcharts/AmLegend)

### Simple Column Chart 直條圖
[![](https://i.imgur.com/gAWpNe6.png)](https://codepen.io/katherineeeeee/pen/MPVEaz)

[![](https://i.imgur.com/xVa54cH.png)](https://codepen.io/katherineeeeee/pen/YJarpp)

> How to used
```javascript=
makeBarChart: function (element, displayData, title) {
    $('#' + element).html('');

    var opts = {
        type: "serial",
        theme: "light",
        dataProvider: displayData, // <---------塞資料
        // rotate: true,
        graphs: [{
            type: "column",
            title: title,
            valueField: "value", // <---------塞"數值"
            lineAlpha: 0,
            fillAlphas: 0.8,
            balloonText: "[[title]]：<b>[[value]]</b>&nbsp;&nbsp;([[category]]) "
        }],
        chartCursor: {
            categoryBalloonEnabled: false,
            cursorAlpha: 0,
            zoomable: false
        },
        categoryField: "day", // <---------塞"分類"
        valueAxes: [{ 
            title: "我是y軸標題"
        }],
        categoryAxis: {
            gridCount: data.length,
            autoGridCount: false,
            labelRotation: 45,
            title: "我是x軸標題"
        }
    };

    setTimeout(function () {
        AmCharts.makeChart(element, opts);
    }, 200);

}
<!-- HTML -->
<div id="chartdiv"></div>
```
> Data
```javascript=
[ 
    {
        "day": "Sun", // <---------"分類"
        "value": 7 // <---------"數值"
    }, 
    {
        "day": "Mon",
        "value": 13
    },
    ...
]
```

### AmSerialChart 折線圖/多條折線圖
[![](https://i.imgur.com/It7xBvc.png)](https://codepen.io/katherineeeeee/pen/aRYLYv)
[![](https://i.imgur.com/1Pfw9NA.png)](https://codepen.io/katherineeeeee/pen/mzxBpB)
```
legend版面:
legend.valueText = '';
1. 避免多位數金額跑版蓋到標題 ,統一把數值拔掉. 圖標只表示顏色標記


startOnAxis: true 

如果要設"gridCount": 50,也要加"autoGridCount": false,
```

> How to used
```javascript=
makeLineChart: function (element, displayData, graphData) {
    $('#' + element).html(''); 
    
    var chart = new AmCharts.AmSerialChart();
    chart.dataProvider = displayData; // <---------塞資料
    chart.categoryField = "day"; // <---------塞"分類"
    chart.synchronizeGrid = true; 

    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
    categoryAxis.axisColor = "#DADADA";
    
    // value axis 
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.gridAlpha = 0;
    valueAxis.axisColor = "#DADADA";
    valueAxis.axisThickness = 1;
    chart.addValueAxis(valueAxis);

    // GRAPHS
    var graph = graphData;

    // LEGEND
    var legend = new AmCharts.AmLegend();
    legend.marginLeft = 110;
    legend.useGraphSettings = true;
    legend.textClickEnabled = true;
    legend.valueWidth = 150;
    chart.addLegend(legend);

    // WRITE

    setTimeout(function () {
        chart.write(element);
    }, 200);

}
<!-- HTML -->
<div id="chartdiv"></div>
```
> Data
```javascript=
// 多線圖：value1是第一條線的值, value2是第二條線的值, ...
[ 
    {
        "day": "2018-10-12", // <---------"分類"
        "value1": 435.00, // <---------"數值"
        "value2": 16.00, 
        ...
    }, 
    {
        "day": "2018-10-13",
        "value1": 301.09,
        "value2": 4.00,
        ...
    }
]
```

> Format graph data
```javascript=
formatGraphObj: function(totalData){ // totalData(多線圖)
    var tempGraphData = [];
    for (i = 0; i < totalData.length; i++){
        var eachLineObj = {
            "lineColor": #color,
            "bullet": bullets,
            "bulletBorderThickness": 1,
            "hideBulletsCount": 30,
            "title": 每條線標題,
            "valueField": "value"+(i+1), // <---------塞"數值"
            "descriptionField": "hover"+(i+1),
            "valueAxis": "y-axis",
            "balloonText": "[[title]]： <b>[[value]]</b>&nbsp;&nbsp;([[category]]) "
        }
        tempGraphData.push(eachLineObj);
    }
}
```


## Init Params Options
| Params | Type | Default | Description |
| :--- | :---: | :--- | :--- | :--- |
| element | String |  | 放到哪個div
| displayData | Array[Object] |  | 圖形所需資料格式
| categoryField  | String |  | 每個類別
| synchronizeGrid | Boolean |  | this makes all axes grid to be at the same intervals
| categoryAxis |  |  | [x軸(分類軸)](http://docs.amcharts.com/3/javascriptcharts/CategoryAxis)
| parseDates | Boolean | false |如果分類是日期相關物件,設true
| minPeriod | String | DD |這個日期分類的最小單位(ex: ss、mm、hh、DD、MM、YYYY) [formatting-dates](https://www.amcharts.com/docs/v3/tutorials/formatting-dates/)
| ValueAxis |  |  | [y軸(值軸)](http://docs.amcharts.com/3/javascriptcharts/ValueAxis)
| ValueAxis |  |  | [y軸(值軸)](http://docs.amcharts.com/3/javascriptcharts/ValueAxis)
| rotate | Boolean | false | 圖形顛倒90度



## AmGraph Params Options
| Params | Type | Default | Description |
| :--- | :---: | :--- | :--- | :--- |
| graph |  |  |如果是多線圖就是一個陣列(幾條線就是幾個物件)
| valueAxis |  |  |用哪個valueAxis的id名稱
| valueField |  |  |對應的值
| lineColor | Color |  |每條線的顏色
| bullet | String | none |每條線接點的形狀 ( Types: "none", "round", "square", "triangleUp", "triangleDown", "triangleLeft", "triangleRight", "bubble", "diamond", "xError", "yError" and "custom".)
| title | String |  |圖形名稱
| balloonText | String | [[value]] |滑鼠移過去的提示敘述

[AmGraph 更多參數](http://docs.amcharts.com/3/javascriptcharts/AmGraph)




### 100% Stacked Column Chart 等高直條堆疊圖
[![](https://i.imgur.com/3oSZbcr.png)](https://codepen.io/katherineeeeee/pen/mjMBbJ)


> How to used
```javascript=
makeBarChart: function (element, displayData, columnData) {
    $('#' + element).html('');

    var opts = {
        type: "serial",
        theme: "light",
        dataProvider: displayData, // <---------塞資料
        legend: {
            // "position": "right",
            "autoMargins": true,
            "borderAlpha": 0.2,
            "equalWidths": true,
            "horizontalGap": 10,
            "markerSize": 10,
            "valueAlign": "left",
            "valueWidth": 0
        },
        valueAxes: [{
            "stackType": "100%",
            "axisAlpha": 0,
            "gridAlpha": 0,
            "labelsEnabled": false,
        }],
        graphs: columnData,
        categoryField: "period", // <---------塞"分類"
        "marginTop": 30,
        "marginRight": 0,
        "marginLeft": 0,
        "marginBottom": 40,
        "autoMargins": false,
        "categoryAxis": {
            "gridPosition": "start",
            "axisAlpha": 0,
            "gridAlpha": 0
        },
        "titles": [{
            "text": '我是標題ㄎㄎㄎ'
        }]
    };

    setTimeout(function () {
        AmCharts.makeChart(element, opts);
    }, 200);

}
<!-- HTML -->
<div id="chartdiv"></div>

```
> Data ( ***組這個100%堆疊直條圖的資料格式：每個物件裡面的個數需一樣*** )
```javascript=
[{
    period: "星期一", // <---------"分類"
    ag_fish: 0, // <---------以下都是"數值"
    ag_game: 0,
    ag_video: 0,
    bbin_fish: 0,
    bbin_game: 0,
    bbin_sport: 0,
    bbin_video: 0,
    default: 0,
    dt_game: 0,
    fctc: 0,
    game: 0,
    gc_video: 0,
    hg_sport: 0,
    hk: 396,
    ky_qipai: 0,
    mg_game: 0,
    mg_video: 0,
    sb_fish: 0,
    sb_game: 0,
    sb_numbergame: 0,
    sb_sportbooks: 0,
    sb_virtualsport: 0,
    sb_virtualsport2: 0,
    sport: 0,
    ssc: 853,
    tv: 0,
    vg_qipai: 0
}, {
    period: "星期二",
    ag_fish: 10,
    ag_game: 2,
    ag_video: 7,
    bbin_fish: 0,
    bbin_game: 0,
    bbin_sport: 9,
    bbin_video: 0,
    default: 11,
    dt_game: 0,
    fctc: 0,
    game: 0,
    gc_video: 9,
    hg_sport: 0,
    hk: 86,
    ky_qipai: 0,
    mg_game: 0,
    mg_video: 0,
    sb_fish: 0,
    sb_game: 0,
    sb_numbergame: 9,
    sb_sportbooks: 0,
    sb_virtualsport: 0,
    sb_virtualsport2: 0,
    sport: 0,
    ssc: 125,
    tv: 0,
    vg_qipai: 0
}, 
...]
```
> Format graph data
```javascript=
formatGraphObj: function ( 上面組好的資料 ){ 

    var channelNameList = 上面組好的資料[0]的key對照中文表;
    var allGraphValueData = [];
    
    for(var j in 上面組好的資料[0]){
        if( !(j == 'period'|| j == '')) {
            allGraphValueData.push({
                "lineColor": #color,
                "balloonText": "[[title]], [[category]]<br><span style='font-size:14px;'><b>[[value]]</b> ([[percents]]%)</span>",
                "fillAlphas": 0.9,
                "fontSize": 11,
                "labelText": "[[percents]]%",
                "lineAlpha": 0.5,
                "title": channelNameList[j],
                "type": "column",
                "valueField": j // <---------塞"數值"
            });
        }
    }
    
}

```

## Legend Params Options
| Params | Type | Default | Description |
| :--- | :---: | :--- | :--- | :--- |
| borderAlpha |  |  |標示殼的外框
| autoMargins | Boolean | true |圖例標記置中
| equalWidths | Boolean | true |每一個圖例條目等寬
| horizontalGap | Number | 0 |每一個克算跟條目的寬
| markerSize | Number | 16 |每一個條目色塊的寬
[Legend 更多參數](http://docs.amcharts.com/3/javascriptcharts/AmLegend)

### 有正負值的橫狀長條圖
[![](https://i.imgur.com/s4lysTt.png)](https://codepen.io/katherineeeeee/pen/vajbRp)



> How to used
```javascript=
makeStackedBarChart: function (element, displayData, columnData) {
    $('#' + element).html('');

    var opts = {
        type: "serial",
        theme: "light",
        rotate: true,
        dataProvider: displayData,  // <---------塞資料
        graphs: [{
            "fillAlphas": 0.8,
            "lineAlpha": 0.2,
            "type": "column",
            "valueField": "negative", // <---------塞"左測負數區的值"
            "title": "负成长：( 当期 - 前期 ) < 0",
            "labelText": "[[value]]",
            "clustered": false,
            "labelFunction": function(item) {
                // return item.values.value;
                if(item.dataContext.negative != null) {
                    return item.dataContext.negative;
                }else{
                    return '';
                }
            },
            "balloonFunction": function(item) {
                if( item.dataContext.growthrate == null ){
                    return item.category + ": ∞ (数值成长率)"
                } else {
                    return item.category + ": " + item.dataContext.growthrate + "% (数值成长率)";
                }
            }
            }, {
                "fillAlphas": 0.8,
                "lineAlpha": 0.2,
                "type": "column",
                "valueField": "positive", // <---------塞"右測正數區的值"
                "title": "正成长：( 当期 - 前期 ) > 0",
                "labelText": "[[value]]",
                "clustered": false,
                "labelFunction": function(item) {
                    // return Math.abs(item.values.value);
                    if(item.dataContext.positive != null){
                        return item.dataContext.positive;
                    }else{
                        return '';
                    }
                },
                "balloonFunction": function(item) {
                    if( item.dataContext.growthrate == null ){
                        return item.category + ": ∞ (数值成长率)"
                    } else {
                        return item.category + ": " + item.dataContext.growthrate + "% (数值成长率)";
                    }
                }
            }
        ],
        legend: {
            "autoMargins": false,
            "borderAlpha": 0.2,
            "equalWidths": false,
            "horizontalGap": 10,
            "markerSize": 10,
            "useGraphSettings": true,
            "valueAlign": "left",
            "valueWidth": 0
        },
        categoryField: "category", // <---------塞"分類"
        valueAxes: [{
            "gridAlpha": 0,
            "ignoreAxisWidth": true,
            "labelFunction": function(value) {
                return Math.abs(value);
            },
            "guides": [{
                "value": 0,
                "lineAlpha": 0.2
            }],
            title: '( 当期数值 - 前期数值 )'
        }],
    };

    setTimeout(function () {
        AmCharts.makeChart(element, opts);
    }, 200);

}
<!-- HTML -->
<div id="chartdiv"></div>

```
> Data 
```javascript=
[
    {
        positive: null,  // <---------塞"右測正數區的值"
        negative: -55534,  // <---------塞"左測負數區的值"
        growthrate: -0.82, 
        category: "高频彩种",  // <---------"分類"
        channelCode: "ssc"
    }, {
        positive: null, 
        negative: -5117, 
        growthrate: -1, 
        category: "香港彩票", 
        channelCode: "hk"
    }, 
    ...]
```


### Drill-down column chart 多層圖表
[Open In Codepen](https://codepen.io/katherineeeeee/pen/yqvLoK)
> 原本的Data 
```javascript=
var chartData = [
  { country: "USA", visits: 4025 },
  { country: "China", visits: 1882 },
  { country: "Japan", visits: 1809},
  { country: "Germany", visits: 1322}
];
```
> 可以點到下一層的Data 
```javascript=
var chartData = [
  { country: "USA", visits: 4025,
    subdata: [
        { country: "New York", visits: 1000 },
        { country: "California", visits: 785 },
        { country: "Florida", visits: 501 },
        { country: "Illinois", visits: 321 },
        { country: "Washington", visits: 101 }
    ]
  },
  { country: "China", visits: 1882 },
  { country: "Japan", visits: 1809},
  { country: "Germany", visits: 1322}
];
```
> How to used
```javascript=
chart.addListener("clickGraphItem", function (event) {
  // let's look if the clicked graph item had any subdata to drill-down into
  if (event.item.dataContext.subdata != undefined) {
    // 更新dataProvider
    event.chart.dataProvider = event.item.dataContext.subdata;
    event.chart.validateData();
  }
});

// resetChart(回上一層) 把沒有子層的資料給dataProvider參數
// 更新圖表

```

### More
[參數](http://docs.amcharts.com/3/javascriptcharts)
[各種圖表](https://www.amcharts.com/demos/)




