amchart折线图示例
生活随笔
收集整理的這篇文章主要介紹了
amchart折线图示例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2019獨角獸企業重金招聘Python工程師標準>>>
使用amchart折現圖準備工作2步：
1.需要引用封裝好的amcharts.js文件和css樣式表；
2.在頁面上創建一個div容器存放折線圖；
注意：
? ? ? ? ? 在頁面的head部分我們需要添加amCharts JavaScript庫文件的引用。由于V3 amCharts庫被拆分成了幾個文件，為了節省幾個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 = []; //定義一個數組存儲折線圖上的點數據generateChartData(); //調用自定義方法獲取要顯示在統計圖中的初始數據//創建圖表var chart = AmCharts.makeChart("chartdiv", { //“chartdiv”頁面中放置折線圖的div容器type: "serial", //折線圖屬于柱狀圖的一種，所以使用serialpathToImages: "../amcharts/images/", //指定chart圖片的引用地址dataProvider: chartData, //指定數據來源，一般是一個數據對象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", //節點類型bulletBorderColor: "#FFFFFF", //節點的邊框顏色bulletBorderAlpha: 1, //節點邊框透明度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, //自動調整坐標格子數，false值時展示的值不能自己調整可能會出現序列化后的數據展示界面擁擠graph: "g1"}});chart.addListener("dataUpdated", zoomChart);//生成隨機日期數據和隨機的范圍（如果是后臺傳過來實際數據則直接處理數據不用模擬這些數據）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});}}//當折線圖初始化時觸發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截取超链接后参数