Highcharts utilise un exemple simple et une lecture dynamique asynchrone des compétences data

Highcharts utilise un exemple simple et une lecture dynamique asynchrone des compétences data_javascript

WBOY

Libérer： 2016-05-16 15:22:44

original

1403 Les gens l'ont consulté

Highcharts est une bibliothèque de graphiques écrite en JavaScript pur. Elle peut ajouter facilement et commodément des graphiques interactifs à des sites Web ou à des applications Web. Elle est gratuite pour une étude personnelle, des sites Web personnels et une utilisation non commerciale. Les types de graphiques pris en charge par HighCharts comprennent des graphiques linéaires, des graphiques en aires, des graphiques à barres, des diagrammes circulaires, des graphiques en nuages de points et des graphiques complets.

Première partie : Chargez deux bibliothèques JS entre les têtes.

<script src="html/js/jquery.js"></script>
<script src="html/js/chart/highcharts.js"></script>

Copier après la connexion

Vous pouvez le télécharger depuis http://www.hcharts.cn/ Il existe des tutoriels et des instructions d'utilisation associés.

Si vous êtes bon en anglais, vous pouvez vous rendre sur le site officiel : http://www.highcharts.com/

Partie 2 : Code 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(); 
}

Copier après la connexion

Partie 3 : Code 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]}

Copier après la connexion

Partie 4 : Code de la page HTML

<div id="container" style="min-width:400px;width:1200px;height:400px;"></div>

Copier après la connexion

Permettez-moi de partager avec vous un morceau de code sur les highcharts obtenant des données de manière asynchrone

Code asynchrone de la page

$(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&#63;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);
   });
  });
 });

Copier après la connexion

Ce qu'il convient de noter ici est : une fois le tableau de l'axe x défini, lors de la définition des données de l'axe y, les valeurs correspondant à l'axe x doivent également être poussées dans le tableau, sinon il ne sera pas affiché

En conséquence, dans ajaxhandler, épissez simplement la chaîne et renvoyez-la

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();

Copier après la connexion