如何将div中的多个canav导出到Excel或PDF

时间:2019-03-04 08:04:53

标签: javascript asp.net excel pdf chart.js

我有以下容器div,我将一组canavs附加到这样的容器中:

 <div id="graph" style="width: 90%">
        <div id="canvas-holder" style="width: 25%">
            <div id="lbl_div">
            </div>
        </div>
 </div>
    <style>
        #canvas-holder
        {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-auto-rows: minmax(100px, auto);
        }
        .canvas
        {
            border-style: solid;
            border-width: 1px;
            border-color: #878787;
        }
        #lbl_div
        {
            grid-column: 1;
            grid-row: 1/7;
        }
    </style>

我的功能:

     var canvasId = 0;
      categorizeData.forEach(function(element,index) {
      canvasId++;
      var canvas = document.createElement('canvas');
      canvas.id = 'chart-area'+canvasId;
      canvas.className = "canvas";

      var canvasDiv =  document.getElementById('canvas-holder');
      canvasDiv.appendChild(canvas);

      var myData = element.split(',').map(function(item){ return +item;});
      var ctx = canvas.getContext('2d');
       DrawChart(ctx,myData,backgroundColors,mylabel,departments[index]);
       });

 function DrawChart(ctx, data, backgroundColors, mylabel, title) {
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: mylabel,
            label: '# grades',
            datasets: [{

                data: data,
                backgroundColor: backgroundColors,
                borderColor: backgroundColors,
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: title,
                fontSize: 20,
                fontFamily: "'Amiri', 'serif'"
            },
            layout: {
                padding: {
                    left: 2,
                    right: 2,
                    top: 5,
                    bottom: 5
                }
            },

            legend: {
                display: false,
                labels: {
                    fontColor: 'rgb(255, 99, 132)'
                }
            }
        }
    });
}

我的主要问题是要允许将这些图表导出到一个文件中。

0 个答案:

没有答案