← Highcharts 带有数据标签曲线图表 Highcharts 堆叠柱形图 →

Highcharts 异步加载数据曲线图表

下图是一个 Highcharts 异步加载数据曲线图表

我们引入 jQuery 函数库，然后使用 jQuery.getJSON() 方法从异步加载 csv 文件

导入 data.js 文件

异步加载数据需要引入以下 JavaScript 文件

http://code.highcharts.com/modules/data.js

配置

X 轴

以每周为间隔设置 X 轴：

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

Y 轴

以每周为间隔设置 Y 轴：

配置两个 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 用于设置图表中的数据点相关属性

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
      }
   }
}

范例

下面的代码列出了 Highcharts 异步加载数据曲线图表 的基本配置

<!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 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: 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>

运行范例 »

以上范例输出如下

返回上一级

← Highcharts 带有数据标签曲线图表 Highcharts 堆叠柱形图 →

Highcharts 异步加载数据曲线图表

导入 data.js 文件

配置

X 轴

Y 轴

plotOptions

范例

学习 Hightcharts