[英]Loading 'theme' and 'exporting' module with Highcharts using Requirejs
[英]Highcharts - Exporting Module
我正在使用highcharts來生成從數據庫中提取的圖形數據。
我在使用導出模塊時遇到問題。 我已經包含了出口財產:
exporting{
enabled:true
}
但按鈕沒有出現......
我也將exports.js鏈接到文件中......沒有按鈕出現..
其他人遇到過這個問題嗎?
編輯:
這是代碼:
$.ajax({
type:"POST",
url: "retrievechartdata.php",
data: {questionId:qId, questionIdTwo:qIdTwo, title:title, titleTwo:titleTwo, from:from, to:to},
dataType: "json",
success: function(data) {
//$("#response").html("<div class='successMessage'>"+ data.valuesTwo +"</div>");
var maxY = parseInt(data.max) + 1;
var minY = parseInt(data.min);
if(minY > 0){
minY = 0;
}else{
minY -= 1;
}
var cdata = new Array();
cdata= data.values.split(',');
for(var i=0;i<cdata.length;i++)
{
cdata[i]= parseInt(cdata[i]);
}
var leg = false;
var title = data.questionTitle;
if(data.valuesTwo != "FALSE"){
leg = true;
title += " & "+data.questionTitleTwo;
var cdataTwo = new Array();
cdataTwo = data.valuesTwo.split(',');
for(var i=0;i<cdataTwo.length;i++)
{
cdataTwo[i]= parseInt(cdataTwo[i]);
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
spacingRight: 20
},
credits: {
enabled: false
},
title: {
text: title
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Drag your finger over the plot to zoom in'
},
xAxis: {
type: 'datetime',
maxZoom: 14 * 24 * 3600000, // fourteen days
lineWidth: 1,
lineColor: '#999999',
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: data.questionTitle
},
labels: {
y: 2
},
lineWidth: 1,
lineColor: '#999999',
gridLineWidth: 1,
gridLineColor: '#eaeaea',
min: minY,
max: maxY,
startOnTick: false,
showFirstLabel: false
},
tooltip: {
shared: true
},
legend: {
enabled: leg
},
plotOptions: {
area: {
Color: {
linearGradient: [0, 0, 0, 600],
stops: [
[0, 'rgb(69, 114, 167)'],
[1, 'rgba(2,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'spline',
name: data.questionTitle,
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(data.year, data.month, data.day),
data: cdata,
lineColor: '#f6a828',
color: '#418ed6'
},
{
type: 'spline',
name: data.questionTitleTwo,
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(data.year, data.month, data.day),
data: cdataTwo,
lineColor: '#808080',
color: '#ff0000'
}],
exporting: {
enabled: true
}
})
您使用的是哪個版本的Highcharts? 哪個版本的jQuery?
目前是v2.1.6,我建議你使用最新版本,因為它們不斷修復bug,添加新功能等。
在v2.0之前,不支持導出功能
為了使導出模塊正常工作,您需要做的唯一事情是:
1- 首先:在highcharts腳本之后添加js腳本,如下所示:
...
<script type="text/javascript" src="../js/highcharts.js"></script>
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="../js/modules/exporting.js"></script>
...
默認情況下啟用導出模塊,因此無需擁有您發布的代碼,因此您可以將其刪除:
exporting{
enabled:true
}
2- 秒:確保正確發布exporting-server/index.php
文件。
在這里,您可以獲得有關導出模塊安裝的官方文檔:
- 導出模塊
從版本2.0開始,Highcharts可以使用導出模塊,允許用戶下載圖表的圖像或PDF。 該模塊包含一個額外的JavaScript文件exports.js,以及用PHP編寫的Web服務或服務器模塊。 Highslide Software免費提供出口Web服務。 如果在圖表中包含導出模塊,則右上角會出現兩個按鈕。 一個按鈕打印圖表,僅在客戶端完成。 另一個按鈕處理導出。 默認情況下,圖表的SVG表示由POST發送到http://export.highcharts.com ,在那里使用Apache的Batik轉換器將其轉換為PDF,PNG或JPEG。
有關可用選項的完整文檔,請參閱導航和導出參考項。 另請參閱與導出相關的成員的參考中的“方法和屬性”。
在這里,您可以看到有關導出模塊的配置選項: http : //www.highcharts.com/ref/#exporting
希望它能幫到你。
確保腳本標記有
類型= “文本/ JavaScript的”
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.