如何将画布图表导出到Excel

Question

如何导出到Excel的画布图表？ 这是我的.cshtml代码：

<div class="hrportalbody">
  @using (Html.BeginForm()) {
  <h3><b>DASHBOARD</b></h3>
  <hr />
  <div class="form-horizontal">
    <div class="form-group">
      @Html.Label("Year :", htmlAttributes: new { @class = "control-label col-md-1" })
      <div class="col-md-10">
        @Html.DropDownList("Years", new List
        <SelectListItem>
          { new SelectListItem { Text="2017", Value="2017"}, new SelectListItem { Text="2018", Value="2018"}, new SelectListItem { Text="2019", Value="2019"}, new SelectListItem { Text="2020", Value="2020"}, new SelectListItem { Text="2021", Value="2021"}, new
          SelectListItem { Text="2022", Value="2022"}, new SelectListItem { Text="2023", Value="2023"} }, "Year", new { @class = "input-sm" })
          <input type="submit" value="FILTER" class="btn btn-info col-md-offset-1" />

          <span style="float:right;">
          <button id="downloadExcel">Download Chart Data As Excel</button>
          <br />
          <br />
          </span>
      </div>
    </div>
  </div>
  <div id="chartContainer" style="height: 300px; width: 100%;"></div>
  <br />
  <br />
  <br /> }
</div>

这是我的JavaScript代码：

<script type = "text/javascript" >

  window.onload = function() {

    var chart = new CanvasJS.Chart("chartContainer", {
      animationEnabled: true,
      title: {
        text: "Garansi Letter Based on Cost per-Month"
      },
      axisY: {
        title: "Company Cost",
        titleFontColor: "#4F81BC",
        lineColor: "#4F81BC",
        labelFontColor: "#4F81BC",
        tickColor: "#4F81BC"
      },
      axisY2: {
        title: "BPJS Cost",
        titleFontColor: "#C0504E",
        lineColor: "#C0504E",
        labelFontColor: "#C0504E",
        tickColor: "#C0504E"
      },
      toolTip: {
        shared: true
      },
      legend: {
        cursor: "pointer",
        itemclick: toggleDataSeries
      },
      data: [{
          indexLabelFontSize: 8,
          indexLabelFontFamily: "Lucida Console",
          indexLabel: "{z}",
          indexLabelPlacement: "outside",
          indexLabelOrientation: "horizontal",
          type: "column",
          name: "Company Cost",
          legendText: "Total Company Cost",
          showInLegend: true,
          dataPoints: [{
              label: "Januari",
              y: @ViewBag.jans,
              z: @Html.Raw(ViewBag.jans)
            },
            {
              label: "Februari",
              y: @ViewBag.febs,
              z: @Html.Raw(ViewBag.febs)
            },
            {
              label: "Maret",
              y: @ViewBag.mars,
              z: @Html.Raw(ViewBag.mars)
            },
            {
              label: "April",
              y: @ViewBag.aprs,
              z: @Html.Raw(ViewBag.aprs)
            },
            {
              label: "Mei",
              y: @ViewBag.meis,
              z: @Html.Raw(ViewBag.meis)
            },
            {
              label: "Juni",
              y: @ViewBag.juns,
              z: @Html.Raw(ViewBag.juns)
            },
            {
              label: "Juli",
              y: @ViewBag.juls,
              z: @Html.Raw(ViewBag.juls)
            },
            {
              label: "Agustus",
              y: @ViewBag.augs,
              z: @Html.Raw(ViewBag.augs)
            },
            {
              label: "September",
              y: @ViewBag.seps,
              z: @Html.Raw(ViewBag.seps)
            },
            {
              label: "Oktober",
              y: @ViewBag.okts,
              z: @Html.Raw(ViewBag.okts)
            },
            {
              label: "November",
              y: @ViewBag.novs,
              z: @Html.Raw(ViewBag.novs)
            },
            {
              label: "Desember",
              y: @ViewBag.dess,
              z: @Html.Raw(ViewBag.dess)
            }
          ]
        },
        {
          indexLabelFontSize: 8,
          indexLabelFontFamily: "Lucida Console",
          indexLabel: "{t}",
          indexLabelPlacement: "outside",
          indexLabelOrientation: "horizontal",
          type: "column",
          name: "BPJS Cost",
          legendText: "Total BPJS Cost",
          axisYType: "secondary",
          showInLegend: true,
          dataPoints: [{
              label: "Januari",
              y: @ViewBag.janb,
              t: @Html.Raw(ViewBag.janb)
            },
            {
              label: "Februari",
              y: @ViewBag.febb,
              t: @Html.Raw(ViewBag.febb)
            },
            {
              label: "Maret",
              y: @ViewBag.marb,
              t: @Html.Raw(ViewBag.marb)
            },
            {
              label: "April",
              y: @ViewBag.aprb,
              t: @Html.Raw(ViewBag.aprb)
            },
            {
              label: "Mei",
              y: @ViewBag.meib,
              t: @Html.Raw(ViewBag.meib)
            },
            {
              label: "Juni",
              y: @ViewBag.junb,
              t: @Html.Raw(ViewBag.junb)
            },
            {
              label: "Juli",
              y: @ViewBag.julb,
              t: @Html.Raw(ViewBag.julb)
            },
            {
              label: "Agustus",
              y: @ViewBag.augb,
              t: @Html.Raw(ViewBag.augb)
            },
            {
              label: "September",
              y: @ViewBag.sepb,
              t: @Html.Raw(ViewBag.sepb)
            },
            {
              label: "Oktober",
              y: @ViewBag.oktb,
              t: @Html.Raw(ViewBag.oktb)
            },
            {
              label: "November",
              y: @ViewBag.novb,
              t: @Html.Raw(ViewBag.novb)
            },
            {
              label: "Desember",
              y: @ViewBag.desb,
              t: @Html.Raw(ViewBag.desb)
            }
          ]
        }
      ]
    });
    chart.render();

    function toggleDataSeries(e) {
      if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        e.dataSeries.visible = false;
      } else {
        e.dataSeries.visible = true;
      }
      chart.render();
    }

    document.getElementById("downloadExcel").addEventListener("click", function() {
      downloadAsExcel({
        filename: "chart-data",
        chart: chart
      })
    });

    function downloadAsExcel(args) {
      var dataPoints, filename;
      filename = args.filename || 'chart-data';
      dataPoints = args.chart.data[0].dataPoints;
      dataPoints.unshift({
        y: "X Value",
        z: "Y-Value"
      });
      var ws = XLSX.utils.json_to_sheet(dataPoints, {
        skipHeader: true,
        dateNF: 'YYYYMMDD HH:mm:ss'
      });
      if (!ws['!cols']) ws['!cols'] = [];
      ws['!cols'][0] = {
        wch: 17
      };
      var wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, filename);
      XLSX.writeFile(wb, filename + ".xlsx");
    }
  }

  </script>

我可以使用此Chart.js这样做吗？

如果是，请提出可能的解决方案，否则，请告诉我是否有任何开源工具可以这样做。

非常感谢。