首页 | 简单教程,简单编程

代码编辑器：

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://cdn.hcharts.cn/highcharts/modules/data.js"></script> 
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
<script>

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

var legend = {
   align: 'left',
   verticalAlign: 'top',
   y: 25,
   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 options = {};

options.title = title;
options.subtitle = subtitle;
options.xAxis = xAxis;
options.yAxis = yAxis;
options.legend = legend;
options.plotOptions = plotOptions;
options.series = series;

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {
   var data = {
      csv: csv
   };
      options.data = data;
      var chart = Highcharts.chart('container',options);
});

</script>

代码编辑器：

运行结果：