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。