Highcharts。在右侧添加文本并全部导出为PDF [英] Highcharts. Add text at right side and export all into PDF
本文介绍了Highcharts。在右侧添加文本并全部导出为PDF的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将图文添加到图表的右侧。这工作正常。但是我想将文本导入由导出库生成的pdf和/或图像文件，并且现在不起作用。这是我的代码： http://jsfiddle.net/mrocha/TQ54c/
$（function（）{
$ b $ / **
*创建数据表
* /
Highcharts.drawTable = function（）{
//用户选项
var tableTop = 420，
colWidth = 60，
tableLeft = 20，
rowHeight = 20，
cellPadding = 2.5，
valueDecimals = 1，
valueSuffix ='C';
//内部变量
var chart = this，
series = chart.series，
renderer = chart.renderer，
cellLeft = tableLeft;
//绘制分类标签
$ .each（series，function（serie_index，serie）{
renderer.text（
serie.name，
cellLeft + cellPadding，
tableTop +（seri e_index + 2）* rowHeight - cellPadding
）
.css（{
fontWeight：'bold'
}）
.add（）;
}）;
$ b $ .each（chart.xAxis [0] .categories，function（category_index，category）{
cellLeft + = colWidth;
//应用单元格文本
renderer.text（
类别，
cellLeft - cellPadding + colWidth，
tableTop + rowHeight - cellPadding
）
.attr（{
$ align ='right'
}）
.css（{
fontWeight：'bold'
}）
.add（）;
$ .each（series，function（i）{
renderer.text（
Highcharts.numberFormat（series [i] .data [category_index] .y，valueDecimals ）+ valueSuffix，
cellLeft + colWidth - cellPadding，
tableTop +（i + 2）* rowHeight - cellPadding
）
.attr（{
align：'right'
}）
.add（）;
}）;
}）;
}
/ **
*在表格中画一条线
* /
Highcharts.tableLine =函数（渲染器，x1，y1，x2，y2）{
renderer.path（['M'，x1，y1，'L'，x2，y2]）
.attr（{
'stroke'：'silver'，
'stroke-width'：1
}）
.add（）;
};
$ b / **
*创建图表
* /
window.chart = new Highcharts.Chart（{
图表：{
renderTo：'container'，
events：{
load：Highcharts.drawTable
}，
height：600，
width：800，
marginBottom：250
}，
标题：{
text：'每月平均温度
}，
xAxis：{'b'b'类别：['Jan'，'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct' ，'Nov'，'Dec']
}，
yAxis：{
title：{
text：'Temperature（C）'
}
}，
图例：{
y：-170
}，
系列：[{
name：'Tokyo '，
data：[
}，{
名称：'纽约'，
数据：[ - 0.2,0.8,5.7,11.3,17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5]
}，{
名称：'柏林'，
数据：[-0.9 ，0.6，3.5，8.4，13.5，17.0，18.6，17.9，14.3，9.0，3.9，1.0]
}，{
名称：'伦敦'，
数据：[3.9,4.2 ，5.7，8.5，11.9，15.2，17.0，16.6，14.2，10.3，6.6，4.8]
}]
}）;
chart.renderer.text（'这段文字应该在图表的右侧，并且应该被导出为pdf或图像文件'，
680,80） 。
css（{
width：100，
color：'green'，
textAlign：'left'
}）。attr（{
zIndex： 999
}）。add（）;
}）;
有什么想法吗？难道我做错了什么？提前致谢！
哦，顺便说一下，我也包括一个表格，并且该表格可以很好地导出到pdf和图像文件中。
解决方案
这是由于您通过渲染器添加文本而导致的，但是在导出图表期间在没有您添加的动态内容的情况下重新生成。所以解决方案是使用渲染器在图表中加载事件。在你的情况下，它是功能drawTable。
看看例子：
http://jsfiddle.net/mrocha/TQ54c/
Highcharts.drawTable = function（）{
//自定义文本
this.renderer.text（'此文本应位于图表的右侧。应输出为pdf或图像文件'，
680,80）。
css（{
width：100，
color：'green'，
textAlign：'left'
}）。attr（{
zIndex： 999
}）。add（）;
// ...
};
I'm trying to add a text to the right side of the chart. That's working fine. But I want import that text into pdf and/or image files, generated by the exporting library, and right now that is not working. Here is my code: http://jsfiddle.net/mrocha/TQ54c/
$(function () {
/**
* Create the data table
*/
Highcharts.drawTable = function() {
// user options
var tableTop = 420,
colWidth = 60,
tableLeft = 20,
rowHeight = 20,
cellPadding = 2.5,
valueDecimals = 1,
valueSuffix = ' C';
// internal variables
var chart = this,
series = chart.series,
renderer = chart.renderer,
cellLeft = tableLeft;
// draw category labels
$.each(series, function(serie_index, serie) {
renderer.text(
serie.name,
cellLeft + cellPadding,
tableTop + (serie_index + 2) * rowHeight - cellPadding
)
.css({
fontWeight: 'bold'
})
.add();
});
$.each(chart.xAxis[0].categories, function(category_index, category) {
cellLeft += colWidth;
// Apply the cell text
renderer.text(
category,
cellLeft - cellPadding + colWidth,
tableTop + rowHeight - cellPadding
)
.attr({
align: 'right'
})
.css({
fontWeight: 'bold'
})
.add();
$.each(series, function(i) {
renderer.text(
Highcharts.numberFormat(series[i].data[category_index].y, valueDecimals) + valueSuffix,
cellLeft + colWidth - cellPadding,
tableTop + (i + 2) * rowHeight - cellPadding
)
.attr({
align: 'right'
})
.add();
});
});
}
/**
* Draw a single line in the table
*/
Highcharts.tableLine = function (renderer, x1, y1, x2, y2) {
renderer.path(['M', x1, y1, 'L', x2, y2])
.attr({
'stroke': 'silver',
'stroke-width': 1
})
.add();
};
/**
* Create the chart
*/
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
load: Highcharts.drawTable
},
height: 600,
width: 800,
marginBottom: 250
},
title: {
text: 'Average monthly temperatures'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (C)'
}
},
legend: {
y: -170
},
series: [{
name: 'Tokyo',
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]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
chart.renderer.text('This text should be at the right side of the chart. And should be exported into pdf or image file',
680, 80 ).
css({
width: 100,
color: 'green',
textAlign: 'left'
}).attr({
zIndex: 999
}).add();
});
Any idea? Am I doing something wrong? Thanks in advance!
Oh, by the way, I'm including a table too, and that table is exported nicely to pdf and image files. I just need to include my green text too.
解决方案
It is caused, becase you add text by renderer, but during export chart is gernerated again without "dynamic" content which you add. So the solution is move using renderer to load event in chart. In your case it is to function drawTable.
Take look at example:
http://jsfiddle.net/mrocha/TQ54c/
Highcharts.drawTable = function() {
//custom text
this.renderer.text('This text should be at the right side of the chart. And should be exported into pdf or image file',
680, 80 ).
css({
width: 100,
color: 'green',
textAlign: 'left'
}).attr({
zIndex: 999
}).add();
//...
};
这篇关于Highcharts。在右侧添加文本并全部导出为PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
