彩票走势图

JavaScript图表库Highcharts入门教程(十):工具提示

翻译|使用教程|编辑:吴园园|2020-03-25 14:01:19.957|阅读 352 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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

点击下载Highcharts最新试用版

工具提示

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

JavaScript图表库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 only
tooltip: {
    crosshairs: [true]
}
// Enable for y-axis only
tooltip: {
    crosshairs: [false, true]
}
// Enable for both axes
tooltip: {
    crosshairs: [true,true]
}

想要了解或购买Highcharts正版授权的朋友,欢迎


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP