Ajax加载数据，可点击点(Ajax loaded data, clickable points)
在这里，我们将讨论ajax加载数据图表的示例。 首先，我们将使用jQuery.getJSON()方法进行ajax调用以从Highcharts.Com加载csv文件，当检索到数据时，我们将使用接收的数据填充图表并绘制图表。
我们已经了解了用于在Highcharts Configuration Syntax章节中绘制图表的大多数配置 。
Import data.js
要使用ajax数据，请导入以下脚本。
<script src = "https://code.highcharts.com/modules/data.js"></script>
配置 (Configurations)
现在让我们了解其他配置/步骤。
xAxis
将滴答间隔配置为基于X轴的每周基础。
var xAxis = {
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
};
yAxis
在y轴上配置两个轴。
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
}
];
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
}
}
}
例子 (Example)
highcharts_line_ajax.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
<script src = "https://code.highcharts.com/highcharts-more.js"></script>
<script src = "https://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>
结果 (Result)
验证结果。
新页面打开