我已经能够下载图表。我很麻烦下载图表和表格在highchart。我经历了许多解决方案,我没有得到任何解决方案的Angular 。
Html文件:
<ion-content>
<div [chart]="chart"></div>
<div>
<table id="datatable" class="table">
<thead>
<tr>
<th></th>
<th>Jane</th>
<th>John</th>
</tr>
</thead>
<tbody>
<tr>
<th>Apples</th>
<td>3</td>
<td>4</td>
</tr>
<tr>
<th>Pears</th>
<td>2</td>
<td>0</td>
</tr>
<tr>
<th>Plums</th>
<td>5</td>
<td>11</td>
</tr>
<tr>
<th>Bananas</th>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th>Oranges</th>
<td>2</td>
<td>4</td>
</tr>
</tbody>
</table>
<br />
<button (click)="test()">
download chart
</button>
</div>
</ion-content>
TS文件:
import { Component, OnInit, ViewChild } from "@angular/core";
import * as Highcharts from "highcharts";
import { Chart } from "angular-highcharts";
const Exporting = require("highcharts/modules/exporting");
@Component({
selector: "app-line",
templateUrl: "./line.page.html",
styleUrls: ["./line.page.scss"],
})
export class LinePage implements OnInit {
@ViewChild("lineChart", { static: false }) lineChart: any;
chart: Chart;
Highcharts = Highcharts;
constructor() {
this.chart = new Chart({
data: {
table: "datatable",
},
chart: {
type: "column",
},
title: {
text: "Data extracted from a HTML table in the page",
},
yAxis: {
allowDecimals: false,
title: {
text: "Units",
},
},
tooltip: {
formatter: function () {
return (
"<b>" +
this.series.name +
"</b><br/>" +
this.point.y +
" " +
this.point.name.toLowerCase()
);
},
},
});
}
test = () => {
console.log(this.Highcharts.charts);
this.Highcharts.charts["0"].exportChart({
type: "image/jpeg",
filename: "line-chart",
});
};
ngOnInit() {}
}
模块文件:
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { IonicModule } from "@ionic/angular";
import { LinePageRoutingModule } from "./line-routing.module";
import { LinePage } from "./line.page";
import { ChartModule, HIGHCHARTS_MODULES } from "angular-highcharts";
import * as more from "highcharts/highcharts-more.src";
import * as exporting from "highcharts/modules/exporting.src";
import * as heatChart from "highcharts/modules/heatmap";
import * as heatChartsrc from "highcharts/modules/heatmap.src";
import * as chartdata from "highcharts/modules/data";
import * as chartdatasrc from "highcharts/modules/data.src";
import * as boostcanvace from "highcharts/modules/boost-canvas";
import * as boostcanvacesrc from "highcharts/modules/boost-canvas.src";
import * as boost from "highcharts/modules/boost";
import * as boostsrc from "highcharts/modules/boost.src";
import * as access from "highcharts/modules/accessibility";
import * as accesssrc from "highcharts/modules/accessibility.src";
@NgModule({
providers: [
{
provide: HIGHCHARTS_MODULES,
useFactory: () => [
heatChart,
heatChartsrc,
more,
exporting,
chartdata,
chartdatasrc,
boostcanvace,
boostcanvacesrc,
boost,
boostsrc,
access,
accesssrc,
],
},
],
imports: [
CommonModule,
FormsModule,
IonicModule,
ChartModule,
LinePageRoutingModule,
],
declarations: [LinePage],
})
export class LinePageModule {}
上面我显示我所有的项目代码.
所以你可以更好地理解。我通过下面的评论,但Angular 不是在那个解决方案。
2条答案
按热度按时间pdtvr36n1#
以下是如何在Angular 环境中渲染和导出自定义表格的示例。
演示:https://codesandbox.io/s/angular-5pqqi
如果这样做没有帮助,请在一些在线编辑器上重复您的尝试。
x6h2sr282#
此问题已在angular-highcharts的12.0.0版上解决。