Latest web development tutorials

Highcharts charge asynchrone courbe de données graphique

Highcharts graphique Highcharts graphique

L'exemple suivant illustre charge asynchrone des données courbe graphique. Ici, nous chargeons le fichier csv du asynchrone par jQuery.getJSON () méthode:

Dans la section précédente, nous savons déjà la syntaxe de configuration Highcharts. Regardons un exemple complet:

Importation de fichiers data.js

le chargement des données asynchrones nécessaires pour introduire le fichier js suivant: 

<script src="http://code.highcharts.com/modules/data.js"></script>

configuration

axe des X,

Un axe hebdomadaire intervalle de X: 

var xAxis = {
   tickInterval: 7 * 24 * 3600 * 1000, // 一周
   tickWidth: 0,
   gridLineWidth: 1,
   labels: {
      align: 'left',
      x: 3,
      y: -3
   }
};

axe Y

Un intervalle axe hebdomadaire Y:

Configuration de deux axes Y: 

var yAxis = [{ // 左边 Y 轴
      title: {
         text: null
      },
      labels: {
         align: 'left',
         x: 3,
         y: 16,
         format: '{value:.,0f}'
      },
      showFirstLabel: false
  },{ // 右边 Y 轴
      linkedTo: 0,
      gridLineWidth: 0,
      opposite: true,
      title: {
         text: null
      },
      labels: {
         align: 'right',
         x: -3,
         y: 16,
         format: '{value:.,0f}'
      },
      showFirstLabel: false
   }
];

plotOptions

plotOptions utilisés pour définir les points de données du graphique des propriétés connexes. 

 var plotOptions = {
   series: {
      cursor: 'pointer',
      point: {
         events: {
            click: function (e) {
               hs.htmlExpand(null, {
                  pageOrigin: {
                     x: e.pageX || e.clientX,
                     y: e.pageY || e.clientY
                  },
                  headingText: this.series.name,
                  maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) 
                     + ':<br/> ' + this.y + ' visits',
                  width: 200
               });
            } 
         }
      },
      marker: {
        lineWidth: 1
      }
   }
}

Exemples

Nom du fichier: highcharts_line_ajax.html 

<html>
<head>
   <title>Highcharts 教程 | 本教程(w3big.com)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>   
   <script src="http://code.highcharts.com/modules/data.js"></script> 
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
   var title = {
      text: 'Daily visits at www.highcharts.com'   
   };
   var subtitle = {
      text: 'Source: Google Analytics'
   };
   var xAxis = {
      tickInterval: 7 * 24 * 3600 * 1000, // one week
      tickWidth: 0,
      gridLineWidth: 1,
      labels: {
         align: 'left',
         x: 3,
         y: -3
      }
   };
   var yAxis = [{ // left y axis
         title: {
            text: null
         },
         labels: {
            align: 'left',
            x: 3,
            y: 16,
            format: '{value:.,0f}'
         },
         showFirstLabel: false
      },{ // right y axis
         linkedTo: 0,
         gridLineWidth: 0,
         opposite: true,
         title: {
            text: null
         },
         labels: {
            align: 'right',
            x: -3,
            y: 16,
            format: '{value:.,0f}'
         },
         showFirstLabel: false
      }
   ];   

   var tooltip = {
      shared: true,
      crosshairs: true
   }

   var legend = {
      align: 'left',
      verticalAlign: 'top',
      y: 20,
      floating: true,
      borderWidth: 0
   };

   var plotOptions = {
      series: {
         cursor: 'pointer',
         point: {
            events: {
               click: function (e) {
                  hs.htmlExpand(null, {
                     pageOrigin: {
                        x: e.pageX || e.clientX,
                        y: e.pageY || e.clientY
                     },
                     headingText: this.series.name,
                     maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) 
                        + ':<br/> ' + this.y + ' visits',
                     width: 200
                  });
               }
            }
         },
         marker: {
            lineWidth: 1
         }
      }
   }
   
   var series =  [{
         name: 'All visits',
         lineWidth: 4,
         marker: {
            radius: 4
         }
      }, {
         name: 'New visitors'
      }]

   var json = {};

   json.title = title;
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.legend = legend;
   json.series = series;
   json.plotOptions = plotOptions;
   
   $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {
      var data = {
         csv: csv
      };
	  json.data = data;
	  $('#container').highcharts(json);
   });   
});
</script>
</body>
</html>

L'exemple ci-dessus sortie est:

Highcharts graphique Highcharts graphique