Экспорт таблицы и диаграммы в формате PDF в HIGHCHART с ANGULAR - PullRequest
Новая
       6

Экспорт таблицы и диаграммы в формате PDF в HIGHCHART с ANGULAR

0 голосов
/ 20 апреля 2020

Я могу скачать график. У меня проблемы с загрузкой диаграммы и таблицы в старшей таблице. Я прошел через много решений. У меня не было никакого решения в 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 не в этом решении.

1 Ответ

0 голосов
/ 23 апреля 2020

Ниже приведен пример того, как визуализировать и экспортировать пользовательскую таблицу в среде Angular.

Демонстрация: https://codesandbox.io/s/angular-5pqqi

Если это не так Помогите, пожалуйста, воспроизвести вашу попытку на каком-нибудь онлайн-редакторе.

...