JavaScript图表库Highcharts入门教程（十）：工具提示

工具提示的内容是从HTML的子集呈现的，可以通过多种方式对其进行更改，总而言之，可以使实现者完全控制内容。

Highcharts是一款纯JavaScript编写的图表库，为你的Web 站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts最新试用版

工具提示

将鼠标悬停在一系列点上时，将显示工具提示。默认情况下，工具提示显示点的值和系列的名称。

外观

以下代码示例显示了工具提示的最常见外观选项：

tooltip: {    backgroundColor: '#FCFFC5',    borderColor: 'black',    borderRadius: 10,    borderWidth: 3}

也可以将背景色设置为渐变，

工具提示格式

工具提示的内容是从HTML的子集呈现的，可以通过多种方式对其进行更改，总而言之，可以使实现者完全控制内容。除了工具提示配置对象上的选项之外，您还可以设置各系列的选项，如何通过series.tooltip在工具提示中表示每个系列。 

• 可以使用tooltip.headerFormat更改工具提示的标题部分。在共享的工具提示中，使用了第一个系列的headerFormat。
• 每个系列的清单在tooltip.pointFormat选项中给出，或者为每个系列单独的pointFormat给出。 
• 可以在tooltip.footerFormat选项中设置页脚部分。
• 上面的所有选项都可以由tooltip.formatter回调覆盖，以进行编程控制。

默认情况下，工具提示仅允许HTML的子集，因为HTML是使用SVG解析和呈现的。通过将useHTML选项设置为true，渲染器将切换为完整的HTML，从而允许在工具提示中使用表格布局或图像。

tooltip: {    formatter: function() {        return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>, in series '+ this.series.name;    }}

十字准线

十字线显示一条线，将这些点与其相应的轴连接起来。在Highcharts中默认禁用十字准线，但在Highstock中默认启用十字准线。

可以为x轴，y轴或两者启用十字线：

// Enable for x-axis onlytooltip: {    crosshairs: [true]}// Enable for y-axis onlytooltip: {    crosshairs: [false, true]}// Enable for both axestooltip: {    crosshairs: [true,true]}

想要了解或购买Highcharts正版授权的朋友，欢迎咨询在线客服
标签：