amchart折线图示例
生活随笔
收集整理的這篇文章主要介紹了
amchart折线图示例
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
使用amchart折現(xiàn)圖準(zhǔn)備工作2步：
1.需要引用封裝好的amcharts.js文件和css樣式表；
2.在頁(yè)面上創(chuàng)建一個(gè)div容器存放折線圖；
注意：
? ? ? ? ? 在頁(yè)面的head部分我們需要添加amCharts JavaScript庫(kù)文件的引用。由于V3 amCharts庫(kù)被拆分成了幾個(gè)文件，為了節(jié)省幾個(gè)kb空間—你需要添加amchart.js主文件，并根據(jù)你的需求來決定添加一個(gè)或者多個(gè)圖表文件。柱形圖屬于序列圖的一種，因此我們包含這兩個(gè)js文件：
<script src="amcharts/amcharts.js" type="text/javascript"></script> <script src="amcharts/serial.js" type="text/javascript"></script>添加順序很重要，amcharts.js應(yīng)該放在最前面。
amchart折線圖代碼如下：?
?
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>amCharts examples</title><link rel="stylesheet" href="style.css" type="text/css"><script src="../amcharts/amcharts.js" type="text/javascript"></script><script src="../amcharts/serial.js" type="text/javascript"></script> <script type="text/javascript">var chartData = []; //定義一個(gè)數(shù)組存儲(chǔ)折線圖上的點(diǎn)數(shù)據(jù)generateChartData(); //調(diào)用自定義方法獲取要顯示在統(tǒng)計(jì)圖中的初始數(shù)據(jù)//創(chuàng)建圖表var chart = AmCharts.makeChart("chartdiv", { //“chartdiv”頁(yè)面中放置折線圖的div容器type: "serial", //折線圖屬于柱狀圖的一種，所以使用serialpathToImages: "../amcharts/images/", //指定chart圖片的引用地址dataProvider: chartData, //指定數(shù)據(jù)來源，一般是一個(gè)數(shù)據(jù)對(duì)象categoryField: "date", //指定X軸由哪個(gè)字段決定//圖表線（相當(dāng)于X軸）categoryAxis: {parseDates: true, //是否以日期為x軸的值,true代表是gridAlpha: 0.15, //網(wǎng)格的透明度，介于0-1之間，0全透明，垂直于X軸的刻度線形成網(wǎng)格minorGridEnabled: true, axisColor: "#DADADA" //軸的顏色},valueAxes: [{axisAlpha: 0.2,id: "v1"}],//折線圖graphs: [{title: "red line", //軸的名稱id: "g1",valueAxis: "v1", valueField: "visits", //valueField縱軸bullet: "round", //節(jié)點(diǎn)類型bulletBorderColor: "#FFFFFF", //節(jié)點(diǎn)的邊框顏色bulletBorderAlpha: 1, //節(jié)點(diǎn)邊框透明度lineThickness: 2, //折線厚度lineColor: "#b5030d", //折線顏色negativeLineColor: "#0352b5",balloonText: "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>"}],//光標(biāo)chartCursor: {cursorPosition: "mouse" //光標(biāo)的位置},//滾動(dòng)條chartScrollbar: {scrollbarHeight: 40, //滾動(dòng)條高度color: "#FFFFFF",autoGridCount: true, //自動(dòng)調(diào)整坐標(biāo)格子數(shù)，false值時(shí)展示的值不能自己調(diào)整可能會(huì)出現(xiàn)序列化后的數(shù)據(jù)展示界面擁擠graph: "g1"}});chart.addListener("dataUpdated", zoomChart);//生成隨機(jī)日期數(shù)據(jù)和隨機(jī)的范圍（如果是后臺(tái)傳過來實(shí)際數(shù)據(jù)則直接處理數(shù)據(jù)不用模擬這些數(shù)據(jù)）function generateChartData() {var firstDate = new Date();firstDate.setDate(firstDate.getDate() - 500);for (var i = 0; i < 500; i++) { var newDate = new Date(firstDate);newDate.setDate(newDate.getDate() + i);var visits = Math.round(Math.random() * 40) - 20;chartData.push({date: newDate,visits: visits});}}//當(dāng)折線圖初始化時(shí)觸發(fā)zoomChart()方法function zoomChart() {//多種zoom方法可以使用， zoomToIndexes, zoomToDates, zoomToCategoryValues，這里使用zoomToIndexeschart.zoomToIndexes(chartData.length - 40, chartData.length - 1);}//修改條件pan模式和select模式function setPanSelect() {var chartCursor = chart.chartCursor;if (document.getElementById("rb1").checked) {chartCursor.pan = false;chartCursor.zoomable = true;} else {chartCursor.pan = true;}chart.validateNow();} </script></head><body><div id="chartdiv" style="width: 100%; height: 400px;"></div><div style="margin-left:35px;"><input type="radio" checked="true" name="group" id="rb1" onclick="setPanSelect()">Select<input type="radio" name="group" id="rb2" onclick="setPanSelect()">Pan</div> </body></html>?
轉(zhuǎn)載于:https://my.oschina.net/u/3544533/blog/1608629
總結(jié)
以上是生活随笔為你收集整理的amchart折线图示例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据结构——Java Stack 类
- 下一篇： js截取超链接后参数