彩票走势图

JavaScript图表库Highcharts入门教程(五):常见问题

翻译|使用教程|编辑:吴园园|2019-10-30 16:43:45.500|阅读 341 次

概述:本文将为您介绍Highcharts中经常遇见的问题,希望对您有所帮助。

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

相关链接:

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

Highcharts现已更新至最新版本7.2.0,新版本添加了新的顶级选项-说明;几乎所有系列都增加了对多个色轴的支持;增加了高对比度光和高对比度 - 黑暗主题,与背景形成3:1对比度,并修复了一些之前存在的BUG,赶快下载试用吧~

点击下载Highcharts最新试用版

常见问题

  • Highcharts是否引用我们域外的文件?

  • 我的图表未显示在Internet Explorer 7或8中

  • 我可以将Highcharts与...服务器一起使用吗?

  • 我可以在Highcharts中使用Highstock中的功能吗?

  • 我可以向导出的图表添加数据表吗?

  • 如何从Highcharts中获得最佳性能?

  • 我可以将多个图表导出到同一图像或PDF吗?

  • 我的非英文字符未正确显示在图表中

  • 我可以在不使用浏览器的情况下在服务器上生成图表吗?

  • 如何定义不规则时间数据?

  • 如何从MySQL数据库添加数据?

  • 您在我的国家/地区的地图不包含有争议的区域

是否Highcharts参考我们的域之外的文件吗?

对于基本用法,Highcharts除了highcharts.js / highstock.js以外,不引用任何其他文件,尽管您需要注意某些情况。

  • 导出模块。由于并非所有浏览器都可以将图表转换为图像格式,因此默认情况下,此操作是在我们的Web服务//export.highcharts.com上完成的。生成的SVG从浏览器发送到导出服务器,然后将图像发送回。如果您担心数据内容通过Internet传输,则应考虑我们的替代解决方案。最简单的选择是使用我们的  模块进行客户端导出。查看功能和兼容性表是否符合您的要求。如果您有权访问节点服务器,则还可以设置自己的导出服务器。 ;

  • 某些功能(包括客户端导出)可能需要第三方依赖性。其中一些是根据需要从我们的服务器加载的,但是在这些情况下,加载位置是可配置的。有关所有外部依赖项的详细信息,包括许可和安全性详细信息,可以在可选的依赖项文档文章中找到。

我的图表未显示在Internet Explorer 7或8中

图表在现代浏览器中有效但在IE6、7和8中失败的最常见原因是配置选项中的逗号逗号。流浪逗号是JavaScript中对象或数组的最后一项之后的逗号。这些将在现代浏览器中静默传递,但会在旧版IE中导致JavaScript错误。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime'
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5,  
                216.4, 194.1, 95.6, 54.4],
        pointStart: Date.UTC(2012, 0, 1),
        pointInterval: 24 * 3600 * 1000,
    }]
});

旧版IE无法显示图表的另一种情况是禁用了安全设置“ ActiveX控件和插件” =>“二进制和脚本行为”。这种情况很少在用户计算机上发生,但是我们时常在公司网络上看到这种情况。在这种情况下,IE无法绘制任何矢量图形,仅显示文本。 

我可以将Highcharts与...服务器一起使用吗?

Highcharts完全在客户端上运行,并且可以与任何可交付HTML和JavaScript内容的Web服务器一起使用。无论您的服务器是PHP,Perl,ASP,ASP.NET,Node.js还是其他任何产品,Highcharts都完全不知道它。HTML / JavaScript文件也可以从文件系统加载,在应用程序平台中就是这种情况,其中Highcharts加载到应用程序内的Web组件中。

集成Highcharts的最佳做法可能因系统而异。您应该遵循在特定系统上处理JavaScript的常规做法。有些人喜欢通过Highcharts设置提供干净的JSON或JavaScript文件,其他人则希望将JavaScript设置直接写入网页。数据可以JSON或CSV文件的形式加载(请参阅左侧菜单中的处理数据),或在图表设置中以内联方式打印。在使用数据库供电的后端时,让您的服务器系统提供JSON或CSV文件可能更干净。

对于与服务器的实时连接,您可以设置网页以通过XHR加载新数据,或使用WebSockets设置直接通信。在浏览器中的新数据到达,图表可以保持通过各种动态终结点像更新Series.addPoint(),Point.update(),Chart.addSeries(),Chart.update()等。

在开始设置复杂的后端之前,您可能需要查看www.highcharts.com/download,是否有人为您的特定系统创建了包装。

我可以在Highcharts中使用Highstock中的功能吗?

是的,大多数Highstock功能都可以应用于标准图表。从许可的角度来看,使用Stock软件包的功能显然需要Highstock许可。

从技术上讲,Highcharts Stock是作为Highcharts的一组插件实现的。股票包中包含Highcharts的整个代码库,您可以使用Highcharts.Chart并调用通常与股票图相关联的某些功能来调用图表。

我可以在导出的图表中添加数据表吗?

如果您不关心导出,则只需通过export-data模块和一个简单的选项exporting.showTable添加数据表。但是,此表不支持导出为SVG或其他图像格式,但是可以在Highcharts数据和绘图API上进行一些编程,即可绘制一个表。请参阅我们的jsFiddle演示以获取源代码和实时示例。

如何从Highcharts中获得最佳性能?

在处理具有大量数据点的序列时,需要考虑一些事项。

  1. 首先,考虑使用Boost模块。

  2. 否则,对于折线图,建议禁用点标记,因为这会增加性能开销。

  3. 禁用阴影可提高性能,因为会为每个包含阴影的形状创建三个阴影元素。

  4. 对于大型列系列,建议至少对于基于VML的浏览器禁用初始动画plotOptions.column.animation。区分快速SVG浏览器和较慢的VML浏览器的最佳方法是使用Highcharts.svg布尔属性。

我可以将多个图表导出到同一图像或PDF吗?

当前,该功能尚未在核心中实现,但是您可以通过几种方法来实现。 

  1. 使用我们的技巧来导出多个图表。基本上,此代码获取所有图表的SVG,对其进行修改并将其应用于一个单独的SVG文件,该文件将发送到服务器以进行图像转换。如果需要将数据发送到我们的服务器,我们还支持使用客户端导出模块。

  2. 在服务器上创建一个HTML文件,其中包含所有所需的图表,并对此进行纯服务器端转换。

我的非英文字符未正确显示在我的图表中

如果您使用的是德国变音符号,Scandinavian vowels或非欧洲字母,则需要对文件使用UTF-8编码。有两种方法可以做到这一点。

确保定义图表的HTML页面为UTF-8。文件本身以及数据库内容(如果适用)必须编码为UTF-8。此外,content-typeHTTP标头或相应的元标记必须反映以下内容:

< meta http-equiv = “ content-type ” content = “ text / html; charset = utf-8 ” />

如果您无权更改整个HTML文件,则可以在具有UTF-8编码的单独JS文件中定义图表。 

<script src="charts.js" charset="UTF-8"></script>

我可以在不使用浏览器的情况下在服务器上生成图表吗?

可以,详情请关注我们后续的文章教程。

如何定义不规则时间数据?

要以不规则的间隔添加数据点,而不是为系列定义pointStart和pointInterval,请为每个点定义一个X值(日期)。

如果您希望该行在缺少日期的情况下中断,请插入空值。

如何从MySQL数据库添加数据?

详情请关注我们后续的文章教程。

您的国家/地区地图不包含有争议的区域

我们尽我们所能,不要站在边界冲突中,但是我们意识到需要包括有争议地区的地图。为了解决这个问题,我们尝试使默认地图符合中立的事实上的边界或惯例,同时提供包含有争议区域的替代地图。

重要推荐:

  • 纯JavaScript编写的开源股票图表控件:Highstock

  • 一个基于web项目创建地图的HTML5/JavaScript地图组件:Highmaps

=====================================================

想要购买Highcharts正版授权的朋友可以。

更多精彩内容,敬请关注下方的微信公众号,及时获取产品最新资讯▼▼▼

JavaScript图表库Highcharts入门教程(五):常见问题


标签:

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

文章转载自:

为你推荐

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


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP