Question

我正在尝试将整个饼图饼图保存为PDF。我使用jQuery / FLOT绘制饼图和条形图，我希望用户能够下载Flot Charts的PDF版本。

任何想法，我都很感激。

这是我的代码

var data = [
{ label: "studentsCount", color: "#4572A7" ,data: <?php echo $studentsCount; ?>},
{ label: "lecturesCount", color: "#ED47E2" , data: <?php echo $lecturesCount; ?>}
];

 $(document).ready(function () {
 $.plot($("#placeholder"), data, {
    series: {
        pie: {
            show: true,
            radius: 1,
 label: {
            show: true,
            radius:0.7,

            formatter: function(label, series) {
                 var result =[ <?php echo $studentsCount; ?> , <?php echo $witnessedCount; ?> 
            ];

              if ( label == "unwitnssedCount")
               { 
                 return '<div style="font-size:15px; text-align:center; left:-90px; top:-18px;            
     position:absolute; color:white;">'+label+'<br/>'+(result[0])+'</div>';
               }
              else if (label == "lecturesCount")
               { 
                 return '<div style="font-size:17px; text-align:center; left:-33px; top:-18px;   
     position:absolute; color:white;">'+label+'<br/>'+(result[1])+'</div>';
               }

           },
            background: {
                opacity: 0.8,

            }
        }
        }
    },
    grid: {

        clickable: true
    },
    legend: {
        labelBoxBorderColor: "none"
    }
   });
  $("#placeholder").bind("plotclick", pieHover);



   $("#toPdf").on("click", function(e) {
    e.preventDefault();

        html2canvas($("#pdf").get(0), {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);

                var imgData = canvas.toDataURL('image/png');
                console.log('Report Image URL: '+imgData);
                var doc = new jsPDF('landscape');

                doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
                doc.save('charts.pdf');
            }
        });
      });


     });

    function pieHover(event, pos, obj) {
     if (!obj)

     return;
  var links = ['../../Charts/students/studentsCount.php',                  '../../Charts/students/lecturesCount.php']; 
 var result =[ <?php echo $studentsCount; ?> , <?php echo $lecturesCount; ?> 
            ];
if ( obj.series.label == "studentsCount")
   {
    $("#pieHover").html('<span style="font-weight: bold; color: 
   '+obj.series.color+'">'+obj.series.label+' ('+result[0]+')</span>');
     window.open(links[0], '_blank');
    console.log(obj);
   }
else if ( obj.series.label == "lecturesCount")
{
  $("#pieHover").html('<span style="font-weight: bold; color: 
'+obj.series.color+'">'+obj.series.label+' ('+result[1]+')</span>');
   window.open(links[1], '_blank');
  console.log(obj);
}

    }

HTML代码

body { font-family: Verdana, Arial, sans-serif; font-size: 14px; }
#placeholder { width: 500px; height: 300px;top: -680px; left:0px;}
 .legend table, .legend > div { height: 122px !important; opacity: 1 !important; left: -60px;    
width:

   100px !important; }
.legend table { border: 1px solid #555; padding: 5px; }

.form-actions {top: -90px;}

</style>
<!-- HTML -->
<div id="flot-placeholder" style="width:450px;height:300px;margin:0 auto"></div>


</script>
</head>
<body>



 <div style="width:450px;height:300px;text-align:center;margin:10px">    

    <div id="flot-placeholder" style="width:100%;height:100%;"></div> 

</div>
     <div id="container" style="min-width: 295px; height:300px; max-width: 400px; margin: 0 auto;   
  position: absolute;right: 80px; top: 147px; "></div>


<div id="placeholder">

</div>


<canvas class="flot-base" width="250" height="150" style="direction: ltr; position: absolute;    
right: 20px; top: 0px; width: 250px; height: 150px;"></canvas>
 <canvas class="flot-overlay" width="250" height="250" style="direction: ltr; position: absolute;   
right: 20px; top: -20px; width: 250px; height: 150px;"></canvas>

谢谢，

Answer 1

尝试此示例，只需点击＆＃34;另存为pdf＆＃34; ，即可开始下载

http://jsfiddle.net/jyu4v/58/

var _canvas = null;

$(function() {
    $.plot($("#container"), [ { label: 'Test', data: [[0, 0], [1, 1]] } ], { yaxis: { max: 1 } });

    $("#toPdf").on("click", function(e) {
        e.preventDefault();

            html2canvas($("#container").get(0), {
                onrendered: function(canvas) {
                    document.body.appendChild(canvas);

                    var imgData = canvas.toDataURL('image/png');
                    console.log('Report Image URL: '+imgData);
                    var doc = new jsPDF('landscape');

                    doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
                    doc.save('testpdf.pdf');
                }
            });
    });
});

HTML

<div id="container" style="width:430px;height:300px"></div>
<a id="toPdf">Download as pdf</a>

<强>更新

试试这段代码

HTML

<div id="flot-placeholder" style="width:450px;height:300px;margin:0 auto"></div>
<a id="toPdf">Download as pdf</a>





     <div style="width:450px;height:300px;text-align:center;margin:10px">       
        <div id="flot-placeholder" style="width:100%;height:100%;"></div> 

    </div>
       <!-- Div for second pie chart (Intervention and falls Assessment) -->
    <div id="container" style="min-width: 295px; height

：300像素;最大宽度：400px;保证金：0自动;位置：绝对;右：80px;上：147px; ＆＃34;＆GT;

的javascript

//******* 2012 Average Temperature - BAR CHART


            var data = [
            [0, 0], 
            [1, 1],
            [2, 2], 
            [3, 3],
            [4, 4],
            [5, 5],
            [6, 6],
            [7, 7],
            [8, 8],
            [9, 9],
            [10, 10]

            ];


var dataset = [
    { label: "", data: data, color: "#5482FF"  }
];

var ticks = [
    [0, "0-2"], [1, "2-4"], [2, "4-6"], [3, "6-8"],
    [4, "8-10"], [5, "10-12"], [6, "12-14"], [7, "14-16"],
    [8, "16-18"], [9, "18-20"], [10, "20-22"], [11, "22-00"]
      ];


var options = {
    series: {
        bars: {
            show: true
        }
    },
    bars: {
        align: "center",
        barWidth: 0.6 ,
        vertical: true ,
        show:true
    },
    xaxis: {
        axisLabel: "Falls By Time Of Day",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10,
        tickLength:0,

        ticks: ticks

    },
    yaxis: {
        axisLabel: "Number of ",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 3,

        max:20, tickSize:1,
        tickFormatter: function (v, axis) {
            return v;
        }
    },
    legend: {
        noColumns: 0,
        labelBoxBorderColor: "#000000",
        position: "nw"
    },
    grid: {
        clickable: true,
        borderWidth: 1,      

        backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
    }
};

$(document).ready(function () {
    $.plot($("#flot-placeholder"), dataset, options);    

});




function gd(year, month, day) {
    return new Date(year, month, day).getTime();
}

var previousPoint = null, previousLabel = null;

$.fn.UseTooltip = function () {



    $(this).bind("plotclick", function (event, pos, item) {
    var links = [ '../../Charts/result1.php', '../../Charts/result2.php', '../../Charts/result3.php'
                 , '../../Charts/result4.php', '../../Chartsresult5.php' , '../../Charts/result6.php' 
                 , '../../Charts/result7.php', '../../Charts/result8.php' , '../../Charts/result9.php'
                 , '../../Chartsresult10.php', '../../Charts/result11.php'   
           ]; 
        if (item) 
          {
               //alert("clicked");
             //  window.location = (links[item.dataIndex]); 
                 window.open(links[item.dataIndex], '_blank');
                 console.log(item);              
            }
         else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
};

function showTooltip(x, y, color, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y - 40,
        left: x - 120,
        border: '2px solid ' + color,
        padding: '3px',
        'font-size': '9px',
        'border-radius': '5px',
        'background-color': '#fff',
        'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        opacity: 10
    }).appendTo("body").fadeIn(200);
}





// Flot Pie Chart 

var data = [
    { label: "studentsCount", color: "#4572A7" ,data: 10},
    { label: "lecturesCount", color: "#ED47E2" , data: 10}
];



$(document).ready(function () {
    $.plot($("#flot-placeholder"), data, {
        series: {
            pie: {
                show: true,
                radius: 1,
   label: {
                show: true,
                radius:0.7,

                formatter: function(label, series) {
                     var result =[ 10 , 10    ];

                  if ( label == "studentsCount")
                   { 
                     return '<div style="font-size:15px; text-align:center; left:-90px; top:-18px; position:absolute; color:white;">'+label+'<br/>'+(result[0])+'</div>';
                   }
                  else if (label == "lecturesCount")
                   { 
                     return '<div style="font-size:17px; text-align:center; left:-33px; top:-18px; position:absolute; color:white;">'+label+'<br/>'+(result[1])+'</div>';
                   }

               },
                background: {
                    opacity: 0.8,

                }
            }
            }
        },
        grid: {

            clickable: true
        },
        legend: {
            labelBoxBorderColor: "none"
        }
    });
    $("#flot-placeholder").bind("plotclick", pieHover);



       $("#toPdf").on("click", function(e) {
        e.preventDefault();

            html2canvas($("#flot-placeholder").get(0), {
                onrendered: function(canvas) {
                    document.body.appendChild(canvas);

                    var imgData = canvas.toDataURL('image/png');
                    console.log('Report Image URL: '+imgData);
                    var doc = new jsPDF('landscape');

                    doc.addImage(imgData, 'PNG', 10, 10, 190, 95);
                    doc.save('charts.pdf');
                }
            });
    });

});

function pieHover(event, pos, obj) {
    if (!obj)

    return;
     var links = ['../../Charts/studentsCount.php', '../../Charts/lecturesCount.php']; 
     var result =[ 10 , 10 
                ];
    if ( obj.series.label == "studentsCount")
       {
        $("#pieHover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+result[0]+')</span>');
         window.open(links[0], '_blank');
        console.log(obj);
       }
    else if ( obj.series.label == "lecturesCount")
    {
      $("#pieHover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+result[1]+')</span>');
       window.open(links[1], '_blank');
      console.log(obj);
    }

}

将flot饼图保存为PDF

1 个答案: