javascript - Highcharts - 导出模块

Question

我正在使用 highcharts 生成从数据库中提取的图形数据。

我在使用导出模块时遇到问题。我已经包含了导出属性:

exporting{
  enabled:true
}

但是按钮没有出现...

我也将 exporting.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
      }
   })

Answer 1

您使用的是哪个版本的 Highcharts？哪个版本的 jQuery？

目前是v2.1.6，我建议你使用最新的版本，因为他们在不断地修复错误，添加新功能等。

在 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文件。

这里是官方文档中关于导出模块安装的内容:

1. Exporting module

From version 2.0 an exporting module is available for Highcharts, which allows users to download images or PDF's of your charts. This module consists of an extra JavaScript file, exporting.js, and a web service or server module written in PHP. Highslide Software offers the exporting web service free of charge. If you include the exporting module in your charts, two buttons will appear in the upper right. One button prints the chart, which is done on the client side only. The other button handles exporting. By default, an SVG representation of the chart is sent by POST to http://export.highcharts.com, where it is converted using Apache's Batik converter to PDF, PNG or JPEG.

See the navigation and exporting reference items for a full documentation for the options available. Also see under "Methods and Properties" in the reference for members releated to exporting.

在这里您可以看到有关导出模块的配置选项:http://www.highcharts.com/ref/#exporting

希望对你有帮助。