將NG2圖表導出到PNG圖像

我想創建一個鏈接，允許用戶下載顯示的圖表。我目前試圖讓它起作用的方式是.toDataUrl這被認爲是一種安全的方式，或者是有另一種方式去做這件事。將NG2圖表導出到PNG圖像

HTML：

<canvas id="myChart" baseChart [colors]="colorsOverride" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" 
    [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"> 
</canvas> 

<div class="footer"> 
    <button (click)="exportGraph()">Export Graph</button> 
</div>

組件：

export_graph = <HTMLCanvasElement>document.getElementById("myChart"); 
    downloadLink: string; 

    exportGraph(){ 
    this.downloadLink = this.export_graph.toDataURL("image/png"); 
    }

當我嘗試出口，這是錯誤消息我在控制檯中看到： Cannot read property 'toDataURL' of null

來源

2017-05-02 bluePearl

在行'export_graph = document.getElementById（「myChart」）;'被執行的時候，組件的dom不會被構造。因此，它將返回null。嘗試把它放在'ngAfterViewInit'中，並且不要忘記實現'AfterViewInit' ..工作在一個蹲點和答案。 –

[爲什麼jQuery或像getElementById這樣的DOM方法找不到元素？]（http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such- as-getelementbyid-not-the-element） –

@MikeMcCaughan很好 - 我使用typecript和angular2，我的問題更傾向於使用ng-charts（charts.js），並且沒有建議的解決方案適用於我的代碼結構體。 – bluePearl

你應該使用錨定標記<a>而不是<button>，你可以將它設計得像一個按鈕。然後就可以把點擊事件，這樣來做：

plunker：http://plnkr.co/edit/xyfWok58R3eQdYk7pAds?p=preview

首先，下載鏈接添加到您的HTML <a href="#" (click)="downloadCanvas($event)"> DOWNLOAD THIS</a>

然後創建downloadCanvas功能

downloadCanvas(event) { 
    // get the `<a>` element from click event 
    var anchor = event.target; 
    // get the canvas, I'm getting it by tag name, you can do by id 
    // and set the href of the anchor to the canvas dataUrl 
    anchor.href = document.getElementsByTagName('canvas')[0].toDataURL(); 
    // set the anchors 'download' attibute (name of the file to be downloaded) 
    anchor.download = "test.png"; 
}

重要的是在點擊而不是在手之前完成document.getElement...。通過這種方式，您肯定知道HTML視圖和<canvas>已渲染並完成繪圖（您可以在頁面上看到它）。

您在問題中的表現方式，您在尋找<canvas>元素之前它甚至會在頁面上呈現，也就是說它未定義的原因。

來源

2017-05-02 22:24:48

謝謝你現在按預期工作。但有一個問題，當我做出口有沒有辦法控制導出圖的大小？顯示它是一個小的合適的大小，但出口時，我想增加其大小。 – bluePearl

你將不得不重新創建你想要的大尺寸的'canvas'，然後根據我的答案下載它。當你這樣做時，你可以保持畫布隱藏。我這樣說是因爲如果你放大一個小的畫布圖像，它會看起來像素化。 –

是真的 - 謝謝我會繼續前進，並嘗試一下。此外，我進一步測試這個解決方案，並意識到，如果我在頁面上有多個圖表，並且無論我點擊哪個圖表下載，只下載一個圖表類型 - 我是否需要傳入一個ID或一些標識符圖形？ – bluePearl

將NG2圖表導出到PNG圖像

回答

相關問題