本文以highCharts中文网上的例子为原型,处理解决highCharts导出功能为英文的问题。
我们使用highCharts当然希望所有提示或文本都是中文的了,但是highCharts的默认语言是英语,如下图。
那么怎么把图片中导出功能的提示换成中文呢?
本文利用highCharts的在线测试平台来解决这个问题。
只需要加入一个全局设置,即可解决这个问题。
Highcharts.setOptions({ lang: { printChart:"打印图表", downloadJPEG: "下载JPEG 图片" , downloadPDF: "下载PDF文档" , downloadPNG: "下载PNG 图片" , downloadSVG: "下载SVG 矢量图" , exportButtonTitle: "导出图片" } });
$(function () { Highcharts.setOptions({ lang: { printChart:"打印图表", downloadJPEG: "下载JPEG 图片" , downloadPDF: "下载PDF文档" , downloadPNG: "下载PNG 图片" , downloadSVG: "下载SVG 矢量图" , exportButtonTitle: "导出图片" } }); // Set up the chart var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'column', margin: 75, options3d: { enabled: true, alpha: 15, beta: 15, depth: 50, viewDistance: 25 } }, title: { text: 'Chart rotation demo' }, subtitle: { text: 'Test options by dragging the sliders below' }, plotOptions: { column: { depth: 25 } }, 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] }] }); // Activate the sliders $('#R0').on('change', function(){ chart.options.chart.options3d.alpha = this.value; showValues(); chart.redraw(false); }); $('#R1').on('change', function(){ chart.options.chart.options3d.beta = this.value; showValues(); chart.redraw(false); }); function showValues() { $('#R0-value').html(chart.options.chart.options3d.alpha); $('#R1-value').html(chart.options.chart.options3d.beta); } showValues(); });
最后效果:
其实highCharts并不神秘,只要你想到你想要什么样的,你就能通过查阅highCharts的API达到你的目的。
比如说这个问题,我们需要把导出功能里的英文换成中文。解决这个问题有两个思路。
1、从API里查询导出功能的设置。
看上面的列表,我们并没有找到关于语言的设置,当然我们可以修改exporting.js来达到我们的目的,但是最好不要动highCharts的js,能够通过设置实现的功能就不要通过修改(破坏其封装)。
2、设置语言大部分都是和lang有关的,那么我们就通过API查看一下全局设置里的lang
在全局配置的lang里,我们发现了我们需要修改的英文提示,那么怎么修改它的默认值呢?
查API...
lang的设置方式:
Highcharts.setOptions({ lang: { months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao?t', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] } });
如上的分析思路,我们通过API很同意的走进了highCharts的世界,highCharts的样式很漂亮,交互性很好,很生动,很动态的表现了你的数据图表,值得一试。