Сохраните график пирога в формате PDF

Я пытаюсь сэкономить целую диаграмму пирога флота в PDF. Я использую jQuery/FLOT для рисования диаграммы пирога и диаграммы, я хотел бы, чтобы пользователь мог загрузить PDF-версию графиков флота.Сохраните график пирога в формате 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>

Спасибо,

источник

2014-11-26 Неверная Мир

попробовать этот пример просто нажмите на "Сохранить как PDF" и загрузка начнется

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>

UPDATE

попробуйте этот код

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

: 300px; max-width: 400 пикселей; margin: 0 auto; позиция: абсолютная, справа: 80 пикселей; top: 147px; «>

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); 
    } 

}

источник

2014-11-26 11:15:31 faby

вы могли посмотреть на мой вопрос, пожалуйста, вы можете быть в состоянии помочь мне с этой проблемой http://stackoverflow.com/questions/27443398/how-do-i-display -Несколько уложенных-колонки-для-каждой-дата-диапазона-в-ан-сложенной-бар/27452930 # 27452930 –

Сохраните график пирога в формате PDF

ответ

Смежные вопросы