###### 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/)