Highcharts - 输出模块 [英] Highcharts - Exporting Module

查看:165
本文介绍了Highcharts - 输出模块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

我现在用的是出口模块有问题。我已经包括了出口属性:

  {出口
  启用:真
}

但按钮不会出现......

我也挂了exporting.js到文件太...出现任何按钮。

任何人都有这个问题?

编辑:

下面是code:

  $。阿贾克斯({
               键入:POST,
               网址:retrievechartdata.php
           数据:{questionId:QID,questionIdTwo:qIdTwo,标题:标题,titleTwo:titleTwo,从:从到:要},
               数据类型:JSON
               成功:功能(数据){
         //$(\"#response\").html(\"<div类='successMessage'&gt;中+ data.values​​Two +&LT; / DIV&gt;中);
                   VAR MAXY = parseInt函数(data.max)+ 1;
                   VAR MINY = parseInt函数(data.min);           如果(MINY大于0){
             MINY = 0;
           }其他{
             MINY - = 1;
           }           VAR CDATA =新的Array();
           CDATA = data.values​​.split(,);
           对于(VAR I = 0; I&LT; cdata.length;我++)
           {
             CDATA [I] = parseInt函数(CDATA [我]);
           }
           VAR腿= FALSE;
           VAR标题= data.questionTitle;
           如果(data.values​​Two!=假){
             腿= TRUE;
             标题+ =&放大器;+ data.questionTitleTwo;
             VAR cdataTwo =新的Array();
             cdataTwo = data.values​​Two.split(,);
             对于(VAR I = 0; I&LT; cdataTwo.length;我++)
               {
             cdataTwo [I] = parseInt函数(cdataTwo [I]);
               }
           }
              图=新Highcharts.Chart({
      图:{
         renderTo:容器,
         zoomType:X,
         spacingRight:20
      },
      学分:{
        启用:假的
      },
       标题:{
         文本:标题
      },
       字幕:{
         文本:document.ontouchstart ===未定义?
            在情节方面放大单击并拖动:
            拖动你的手指的情节放大
      },
      X轴:{
         类型:'日期时间',
         MAXZOOM:14 * 24 * 3600000,//14天
         的lineWidth:1,
         lineColor:'#999999',
         标题:{
            文字:'日期'
         }
      },
      Y轴:{
         标题:{
            文本:data.questionTitle
         },
     标签: {
        Y:2
     },
     的lineWidth:1,
         lineColor:'#999999',
         gridLineWidth:1,
     gridLineColor:#eaeaea',
     分:MINY,
     马克斯:MAXY,
         startOnTick:假的,
         showFirstLabel:假的
      },
      提示:{
         共享:真
      },
      传说:{
         启用:腿
      },
      plotOptions:{
         面积:{
            颜色:{
               的LinearGradient:[0,0,0,600],
               停止:
                  [0,'RGB(69,114,167)'],
                  [1,'RGBA(2,0,0,0)']
               ]
            },
            的lineWidth:1,
            标记:{
               启用:假的,
               状态: {
                  悬停:{
                     启用:真实,
                     半径:5
                  }
               }
            },
            影子:假的,
            状态: {
               悬停:{
                  的lineWidth:1
               }
            }
         }
      },      系列:[{
         类型:'样条',
         名称:data.questionTitle,
         pointInterval:24 * 3600 * 1000,
     pointStart:Date.UTC(data.year,data.month,data.day)
     数据:CDATA,
     lineColor:#f6a828',
     颜色:#418ed6
      },
      {
         类型:'样条',
         名称:data.questionTitleTwo,
         pointInterval:24 * 3600 * 1000,
     pointStart:Date.UTC(data.year,data.month,data.day)
     数据:cdataTwo,
     lineColor:'#808080',
     颜色:#FF0000
      }],
      出口:{
        启用:真
      }
   })


解决方案

这Highcharts的版本使用的是?哪个版本的jQuery?

目前是v2.1.6,我建议你使用最新的版本,因为他们不断地修复bug,增加新的功能,等等。

要V2.0没有对出口的功能不支持在此之前

您需要为了使出口模块的工作做的唯一的事情是:

1 第一:添加js脚本的highcharts脚本后,像这样的:

  ...
    &LT;脚本类型=文/ JavaScript的SRC =../ JS / highcharts.js&GT;&LT; / SCRIPT&GT;
    &LT; - 1B)可选:在出口模块 - &GT;
    &LT;脚本类型=文/ JavaScript的SRC =../ JS /模块/ exporting.js&GT;&LT; / SCRIPT&GT;
    ...

出口模块是默认启用的,所以没有必要有code你贴出来,这样你就可以将其删除:

  {出口
  启用:真
}

2 - 第二:请务必发布导出服务器/ index.php文件文件中正确

在这里,你有什么正式文件读取有关出口模块的安装:


  

      
  1. 导出模块

  2.   

  
  

从2.0版本的输出模块可用于Highcharts,它允许用户下载你的图表的图像或PDF文件。该模块包含一个额外的JavaScript文件,exporting.js和PHP编写Web服务或服务器模块。 Highslide软件免费提供的出口Web服务。如果您在您的图表输出模块,两个按钮会出现在右上方。一键打印图表,它仅在客户端完成。其他按键处理出口。默认情况下,图表的SVG重新presentation由POST发送到 http://export.highcharts.com ,在那里使用Apache的蜡染转换器PDF,PNG或JPEG转换。


  
  

请参阅为可用选项的完整文档导航和出口的参考项目。在相关型号为出口成员参照方法和属性下见也。


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

希望它可以帮助你。

I am using highcharts to generate graphical data pulled from a database.

I am having trouble using the exporting module. I have included the exporting property:

exporting{
  enabled:true
}

but the buttons do not appear...

I have also linked the exporting.js to the file too...no buttons appear..

Has anyone else had this issue?

EDIT:

Here is the code:

$.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
      }
   })

解决方案

Which version of Highcharts you are using? Which version of jQuery?

Currently is the v2.1.6, I recommend you use the latest release because they are continuously fixing bugs, adding new functionality, etc.

Prior to v2.0 there is no support to the exporting feature

The only things you need to do in order to bring the exporting module working are:

1- First: Add the js script after the highcharts script, like this:

    ...
    <script type="text/javascript" src="../js/highcharts.js"></script>
    <!-- 1b) Optional: the exporting module -->
    <script type="text/javascript" src="../js/modules/exporting.js"></script>
    ...

The exporting module is enabled by default, so there is no need to have the code you posted, so you can remove it:

exporting{
  enabled:true
}

2- Second: Be sure to publish the exporting-server/index.php file correctly.

Here you have what the official documentation reads about the exporting module installation:

  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.

Here you can see the configuration options regarding the exporting module: http://www.highcharts.com/ref/#exporting

Hope it helps you.

这篇关于Highcharts - 输出模块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆