Highcharts 配置语法
Highcharts 是一个强大的图表库，可以帮助开发者快速创建交互式图表。
Highcharts 配置语法由一个 JavaScript 对象构成，它有许多不同的属性和方法，可以控制图表的样式、数据、动画等等。
首先，我们来看一个最基础的 Highcharts 配置语法示例：
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
在这个例子中，’#container’ 是一个 HTML 元素 ID，用于在 HTML 页面中引用该图表。在这个元素中创建一个 Highcharts 图表，Highcharts 的配置属性对象被传递给 .highcharts() 方法中。
上面的代码创建了一个简单的水平柱状图，标题为’Fruit Consumption’，有两个数据系列，分别为’Jane’、‘John’。当然，还有 x 轴和 y 轴，这些属性可以针对纵向或横向的轴有所不同。
下面是 Highcharts 中常用的配置属性：
1、title
标题对象可以通过 text 属性来定义。例如：
title: {
text: 'My Title'
}
2、xAxis 和 yAxis
xAxis 和 yAxis 对象可以精确地控制轴线上的标签和数值。例如：
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
}
在上面的例子中，x 轴定义了 4 个月份作为标签，y 轴的标题为’Temperature (°C)’。
3、series
数据系列包含数据点和标签，可以使用 series 对象来定义。例如：
series: [{
name: 'Tokyo',
data: [7, 6, 9, 14]
}, {
name: 'New York',
data: [3, 4, 2, 11]
}]
以上代码创建了两个数据系列，分别为’Tokyo’和’New York’。每个数据系列都包含了四个数据点。
4、legend
legend 对象可以控制图例的位置、间距和样式等。例如：
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
}
在上面的例子中，图例位于图表右边，垂直居中，而且布局为竖直方向。
5、colors
colors 属性用来定义图表中数据点和系列线的颜色。例如：
colors: ['#4572a7', '#aa4643', '#89a54e', '#80699b', '#3d96ae', '#db843d', '#92a8cd', '#a47d7c', '#b5ca92']
以上代码定义了九种颜色，Highcharts 会在数据系列中循环使用这些颜色。
高级用户可以调整 Highcharts 中大量的其他配置属性，如图表的边框、背景颜色、动画效果等。总之，这些配置属性提供了多种方法来自定义图表的样式和数据。