amchart折线图示例
生活随笔
收集整理的這篇文章主要介紹了
amchart折线图示例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
2019獨角獸企業(yè)重金招聘Python工程師標準>>>
使用amchart折現(xiàn)圖準備工作2步：
1.需要引用封裝好的amcharts.js文件和css樣式表；
2.在頁面上創(chuàng)建一個div容器存放折線圖；
注意：
? ? ? ? ? 在頁面的head部分我們需要添加amCharts JavaScript庫文件的引用。由于V3 amCharts庫被拆分成了幾個文件，為了節(jié)省幾個kb空間—你需要添加amchart.js主文件，并根據你的需求來決定添加一個或者多個圖表文件。柱形圖屬于序列圖的一種，因此我們包含這兩個js文件：
<script src="amcharts/amcharts.js" type="text/javascript"></script> <script src="amcharts/serial.js" type="text/javascript"></script>添加順序很重要，amcharts.js應該放在最前面。
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 = []; //定義一個數(shù)組存儲折線圖上的點數(shù)據generateChartData(); //調用自定義方法獲取要顯示在統(tǒng)計圖中的初始數(shù)據//創(chuàng)建圖表var chart = AmCharts.makeChart("chartdiv", { //“chartdiv”頁面中放置折線圖的div容器type: "serial", //折線圖屬于柱狀圖的一種，所以使用serialpathToImages: "../amcharts/images/", //指定chart圖片的引用地址dataProvider: chartData, //指定數(shù)據來源，一般是一個數(shù)據對象categoryField: "date", //指定X軸由哪個字段決定//圖表線（相當于X軸）categoryAxis: {parseDates: true, //是否以日期為x軸的值,true代表是gridAlpha: 0.15, //網格的透明度，介于0-1之間，0全透明，垂直于X軸的刻度線形成網格minorGridEnabled: true, axisColor: "#DADADA" //軸的顏色},valueAxes: [{axisAlpha: 0.2,id: "v1"}],//折線圖graphs: [{title: "red line", //軸的名稱id: "g1",valueAxis: "v1", valueField: "visits", //valueField縱軸bullet: "round", //節(jié)點類型bulletBorderColor: "#FFFFFF", //節(jié)點的邊框顏色bulletBorderAlpha: 1, //節(jié)點邊框透明度lineThickness: 2, //折線厚度lineColor: "#b5030d", //折線顏色negativeLineColor: "#0352b5",balloonText: "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>"}],//光標chartCursor: {cursorPosition: "mouse" //光標的位置},//滾動條chartScrollbar: {scrollbarHeight: 40, //滾動條高度color: "#FFFFFF",autoGridCount: true, //自動調整坐標格子數(shù)，false值時展示的值不能自己調整可能會出現(xiàn)序列化后的數(shù)據展示界面擁擠graph: "g1"}});chart.addListener("dataUpdated", zoomChart);//生成隨機日期數(shù)據和隨機的范圍（如果是后臺傳過來實際數(shù)據則直接處理數(shù)據不用模擬這些數(shù)據）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});}}//當折線圖初始化時觸發(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>?
轉載于:https://my.oschina.net/u/3544533/blog/1608629
總結
以上是生活随笔為你收集整理的amchart折线图示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据结构——Java Stack 类
- 下一篇： js截取超链接后参数