3D bar chart in angular 8 application using either d3.js or plotly or three.js

Question

我試圖在 angular 8 應用程序中創建 3D 條形圖。 我已嘗試檢查 d3.js、three.js 和 plotly 圖表框架的文檔，但其中沒有任何示例。 有人可以發布任何示例代碼供我參考嗎？ 如果不是這些框架，任何其他框架也可以工作。 但我只需要 javascript/typescript 語言的代碼。

謝謝！

Answer 1

這就是如何將 d3 圖表集成到 Angular 8

安裝 npm package

npm install angular-d3-charts

將以下腳本添加到您的index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

將這些 styles 添加到style.scss

.tick text {
    font-size: 12px;
}

.axis path,
.axis line {
    fill: none;
    stroke: #4C5554;
    stroke-width: 1;
}

.x.axis .tick line {
    display: none
}

.domain {
    display: block !important;
    stroke: #4C5554 !important;
    stroke-width: 2 !important;
}
.legend {
    font-size: 12px;
    font-family: sans-serif;
    rect {
        stroke-width: 2;
    }
}

在app.module.ts中添加要使用的任何 d3 圖表組件
要添加條形圖，請在declarations中添加BarChartComponent ，如下所示：

import { BarChartComponent } from 'angular-d3-charts'; // this is needed!

@NgModule({
   declarations: [  
   BarChartComponent,
   //...OtherModules 
   ] // along with your other modules
})
export class AppModule {}

使用 package 中的組件：

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  public colors = ["red", "green", "blue"];
  public dataColumns = [1]; // Single Bar Chart
  public barChartData = [
    {
      id: 0,
      label: "label1",
      value1: 10,
      value2: 10,
      value3: 10
    },
    {
      id: 1,
      label: "label2",
      value1: 10,
      value2: 10,
      value3: 10
    }
  ];
}

app.component.html

<angular-d3-bar [id]="test2" [data]="barChartData" [dataColumns]="dataColumns" [colors]="colors" [yAxisTicks]=10 [width]=400
    [height]=200 [transitionDuration]=1000 [transitionDelay]=30 [barWidth]="'16px'"></angular-d3-bar>

更多信息可以在這里找到： https://www.npmjs.com/package/angular-d3-charts#bar-chart

PS：可能需要安裝JQuery和d3。