Highcharts는 순수 JavaScript로 작성된 차트 라이브러리로, 개인 학습, 개인 웹사이트 및 비상업적 용도로 무료로 웹사이트나 웹 애플리케이션에 대화형 차트를 추가할 수 있습니다. HighCharts가 지원하는 차트 유형에는 선형 차트, 영역 차트, 막대 차트, 원형 차트, 분산형 차트 및 종합 차트가 포함됩니다.
1부: 헤드 사이에 두 개의 JS 라이브러리를 로드합니다.
<script src="html/js/jquery.js"></script> <script src="html/js/chart/highcharts.js"></script>
http://www.hcharts.cn/에서 다운로드할 수 있습니다. 관련 튜토리얼과 사용 지침이 있습니다.
영어를 잘하시는 분은 공식 홈페이지 http://www.highcharts.com/
에 접속하시면 됩니다.
2부: JS 코드
//定义一个Highcharts的变量,初始值为null var oChart = null; //定义oChart的布局环境 //布局环境组成:X轴、Y轴、数据显示、图标标题 var oOptions = { //设置图表关联显示块和图形样式 chart: { renderTo: 'container', //设置显示的页面块 //type:'line' //设置显示的方式 type: 'column' }, //图标标题 title: { text: '图表展示范例', //设置标题 //text: null, //设置null则不显示标题 }, //x轴 xAxis: { title: { text: 'X 轴 标 题' }, categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, //y轴 yAxis: { title: { text: 'Y 轴 标 题' }, //设置Y轴标题关闭 }, //数据列 series: [{ data:[120,360,560,60,360,160,40,360,60,230,230,300] }] }; $(document).ready(function(){ oChart = new Highcharts.Chart(oOptions); //异步添加第2条数据列 LoadSerie_Ajax(); }); //异步读取数据并加载到图表 function LoadSerie_Ajax() { oChart.showLoading(); $.ajax({ url : 'ajax/get_value.aspx', type : 'POST', dataType : 'json', async : false, //同步处理后面才能处理新添加的series contentType: "application/x-www-form-urlencoded; charset=utf-8", success : function(rntData){ var oSeries = { name: "第二条", data: rntData.rows1 }; oChart.addSeries(oSeries); } }); oChart.hideLoading(); }
3부: C# 코드
Response.Clear(); Response.Write("{\"rows1\":[10,20,30,40,50,200,70,100,90,200,100,60]}"); Response.End(); 输出的数据格式为 {"rows1":[10,20,30,40,50,200,70,100,90,200,100,60]} 多条的数据格式为 {"rows1":[10,20,30,40,50,200,70,100,90,200,100,60],"rows2":[10,20,30,40,50,200,70,100,90,200,100,60]}
4부: HTML 페이지 코드
<div id="container" style="min-width:400px;width:1200px;height:400px;"></div>
하이차트가 비동기적으로 데이터를 얻는 코드를 공유하겠습니다
페이지 비동기 코드
$(function () { var chart_validatestatics; $(document).ready(function () { var options_validatestatics = { chart: { renderTo: 'container_validatestatics', type: 'column' }, title: { text: '验票分析' }, subtitle: { text: 'tourol.cn' }, xAxis: { }, yAxis: { title: { text: '人数' } }, plotOptions: { bar: { dataLabels: { enabled: true } } }, tooltip: { formatter: function () { return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '人'; } }, credits: { enabled: false }, series: [{ name: "验票用户", width: 3 }] } $.get("/ajaxhandler/dataupdate.ashx?operate_type=validatestatics", function (data) { var xatrnames = []; var yvalidators = []; for (var i = 0; i < data.rows.length; i++) { xatrnames.push([ data.rows[i].atrname ]); yvalidators.push([ data.rows[i].atrname, parseInt(data.rows[i].nums) ]); } alert(xatrnames + yvalidators); options_validatestatics.xAxis.categories = xatrnames options_validatestatics.series[0].data = yvalidators; chart_validatestatics = new Highcharts.Chart(options_validatestatics); }); }); });
여기서 주목해야 할 점은 x축 배열을 정의한 후 y축 데이터를 정의할 때 x축에 해당하는 값도 배열에 푸시해야 한다는 것입니다. 표시되지 않습니다
이에 따라 ajaxhandler에서는 문자열을 연결하고 반환하면 됩니다
string json = "{\"rows\":["; for (int i = 0; i < datas.Rows.Count; i++) { json += "{\"atrname\":\"" + datas.Rows[i]["name"] + "\",\"nums\":\"" + datas.Rows[i]["nums"] + "\"},"; } json = json.TrimEnd(','); json += "]}"; context.Response.Write(json); context.Response.Flush(); context.Response.End();