一文了解Highcharts

标题

描述图表的文本。通常位于图表的顶部。

系列

图表上显示的一个或多个数据序列。

提示框

将鼠标悬停在图表上的序列或点上时，您可以获得描述图表特定部分中的值的工具提示。

传说

图例在图表中显示数据系列，并允许您启用和禁用一个或多个系列。

轴

大多数图表（如典型的笛卡尔折线图和柱形图）都有两个轴来度量和分类数据：垂直轴（y 轴）和水平轴（x 轴）。3D 图表具有第三个轴，即深度轴（z 轴）。极坐标图（也称为雷达图）只有一个轴，该轴跨越图表的周边。仪表图（也称为速度计图）甚至可以具有单个值轴。但是，饼图没有轴。

标题和副标题

默认情况下，标题显示在图表顶部，其下方可以显示可选的副标题。

标题和副标题可以设置，如下例所示。

title: {

text: 'My custom title'

},

subtitle: {

text: 'My custom subtitle'

}

默认情况下，从版本 12 开始，标题和副标题具有自适应对齐功能，以最好地适应文本的长度和图表的宽度。以下规则适用：

标题与短文本的中心对齐。

如果标题即将溢出，则会缩小它以适应，直到达到选项中设置的限制。它默认为 0.67，这是标题与副标题具有相同的字体大小时的比例。title.minScale

如果缩小后标题仍然不合适，则会将其换行为多行。现在，文本左对齐，外观更简洁。

默认情况下（和动态地）副标题应用与主标题相同的对齐方式。

所有这些规则都可以通过显式设置 title 或 subtitle 属性来覆盖，例如，将 设置为 1 以禁止缩小。aligntitle.minScale

标题和副标题也可以通过标题和副标题选项（、、、）的默认属性来移动。有关所有可用选项，请参阅 options.title 和 options.subtitle。alignfloatmarginverticalAlignxy

渲染后可以通过 Chart.setTitle 方法动态修改标题。

标签

轴标签可以沿轴找到，显示它对应的数据的值。还可以使用格式字符串或格式化程序函数自定义标签：

yAxis: {

labels: {

format: '{value}%', // provides the same result as:

formatter: function() {

return this.value + ' %';

}

},

},

上面的示例采用 y 轴标签的值，并在其末尾添加一个 % 符号。

网格线

网格线是将图表划分为网格的水平（和/或垂直）线的集合，从而更容易读取图表的值。

要启用或禁用 x 轴或 y 轴的网格线，请设置相应轴的 gridLineWidth：

xAxis: {

gridLineWidth: 1

},

yAxis: {

gridLineWidth: 1

}

默认情况下，y 轴的网格线处于启用状态 （），而 x 轴的网格线 （） 默认处于禁用状态。gridLineWidth: 1gridLineWidth: 0

网格线的其他选项可以在 x 轴和 y 轴的 API 参考中找到。

次网格线是可以通过设置 minorTickInterval 选项来启用的中间线。

多轴

可以有多个轴并将它们与不同的数据序列链接。为此，需要创建多个轴，如下所示：

yAxis: [{ //--- Primary yAxis

title: {

text: 'Temperature'

}

}, { //--- Secondary yAxis

title: {

text: 'Rainfall'

},

opposite: true

}],

series: [{

yAxis: 0,

data: [

49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,

95.6, 54.4

]

},{

yAxis: 1,

data: [

7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6

]

}]

请注意，多个轴是使用列表创建的，因此第一个轴以索引 0 开头。该选项将轴放在图表的右侧。yAxisopposite: true

对齐刻度

当使用多个轴时，通常需要对齐刻度，以避免多组网格线弄乱图表。chart.alignTicks 选项是默认的。对齐的缺点是每个轴都预先确定与其他轴具有相同的即时报价量，因此即时报价的拟合可能不是最佳的。另一种方法是关闭并设置为 0。truealignTicksgridLineWidth

对齐阈值

从 v10 开始，可以通过 chart.alignThresholds 选项对齐多个轴的阈值。这与确保零级别或其他类型的阈值保持一致，但更进一步。alignTicks

轴标题

轴标题，显示在轴线旁边。默认情况下，此标题对于 y 轴，默认情况下，此标题对 x 轴处于隐藏状态。有关完整的选项集，请参阅 xAxis.title。

轴类型

轴可以是线性、对数、日期时间或类别。轴类型设置如下：

// The types are 'linear', 'logarithmic' and 'datetime'

yAxis: {

type: 'linear',

}

// Categories are set by using an array

xAxis: {

categories: ['Apples', 'Bananas', 'Oranges']

}

线性

沿轴的数字是线性比例的。这是默认的轴类型。如果数据序列中仅存在 y 值，则 x 轴将从 0 到 y 值的数量进行标记（显示 y 值的数组索引）：

var chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

type: 'column'

},

title: {

text: 'Fruit Consumption'

},

xAxis: {

title: {

text: 'Fruit Number'

},

tickInterval: 1

},

yAxis: {

title: {

text: 'Fruit eaten'

},

tickInterval: 1

},

series: [{

name: 'Jane',

data: [1, 0, 4]

}, {

name: 'John',

data: [5, 7, 3]

}]

}});

对数的

在对数轴上，沿轴的数字呈对数递增，轴根据图表中存在的数据序列自行调整。

请注意，在对数轴上，tickInterval 选项基于幂，因此 tickInterval 为 1 表示 0.1、1、10、100 等各有一个刻度。tickInterval 为 2 表示 tick 为 0.1、10、1000 等。tickInterval 为 0.2 时，在 0.1、0.2、0.4、0.6、0.8、1、2、4、6、8、10、20、40 等上打勾。

需要注意的另一件事是，对数轴永远不会变为负数，因为每个完整的轴单位都是前一个单位的十分之一。因此，Highcharts 将删除与轴关联的 0 或负点，如果您尝试将 axis.min 选项设置为 0 或负数，它将失败并显示错误。

在 Highcharts 中在对数轴上绘制零值和负值的技巧

让我们首先深入研究对数的核心概念。当我们有一个像 10 这样的方程，它等于 Z 的幂时，我们说 L 是 Z 以 10 为底的对数。如果 L 是负数，则表示 Z 是小于 1.0 的正分数。在 L 等于零的情况下，Z 恰好为 1.0。另一方面，如果 L 大于 0，则 Z 超过 1.0。必须强调的是，无论 L 的值是多少，Z 都不可能为零或负数。对数没有针对此类情况的定义值，它们仅对正数进行操作。

如果您想在 Highcharts 中在对数轴上显示零值和负值，唯一可行的方法是使用自定义插件。此插件允许在对数轴上interwetten与威廉的赔率体系 负值。重要的是要记住，得到的刻度在数学上并不精确，因为真正的对数轴永远不会触及或越过零。自定义插件可以在此演示中找到。

日期时间

日期时间轴以适当的间隔打印舍入日期值的标签。在内部，日期时间轴是基于自 1970 年 1 月 1 日午夜以来的毫秒数的线性数字轴，由 JavaScript Date 对象指定。根据比例，datetime 标签将表示为时间或日期。

在日期时间轴上，所有时间设置都可以以毫秒、日期字符串（自 v12 起）或 Date 对象的形式给出。这包括 和 、 参数 等选项以及 和 等相关选项。日期字符串被解析并分配当前时区，如图表级 time.timezone 选项中给出的时区，或分配给时间字符串本身中指示的时区。minmaxAxis.setExtremespoint.xseries.pointStart

在 Highcharts Stock 中，x 轴始终是日期时间轴。