小编Gus*_*avo的帖子

我正在尝试将Chart.js与Angular 4一起使用,我在chart.js文档中看到了一个示例,但它使用<script>标记来拉取脚本,因此它不适用于组件.这就是我试图融入Angular的方式:

TS

export class GraphicsComponent implements OnInit {

  ctx = document.getElementById("myChart");
  myChart = new Chart(this.ctx, {
    type: 'pie',
    data: {
        labels: ["New", "In Progress", "On Hold"],
        datasets: [{
            label: '# of Votes',
            data: [1,2,3],
            backgroundColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
      responsive: false,
      display:true
    }
  });

  constructor() { }

  ngOnInit() {
  }

}

HTML

<canvas id="myChart" width="700" height="400"></canvas>

知道如何让它工作吗？

编辑:我已经导入更新我的代码,我现在收到一个错误.

进口代码:

import * as …

我正在尝试在 IOS 模拟器（Iphone 11 - IOS 14.5）上使用画中画，但我做不到，我已经在 youtube、vimeo 和原始视频上进行了测试，但没有任何反应。我也尝试过在设置中启用 PIP，但我找不到该选项，也许它仅限于模拟器？

我希望Angular在用户单击特定选项时执行"onEditClick"函数,这是我的代码:

<select class="form-control">
  <option *ngFor="let skill of skills" (click)="onEditClick(skill)" >{{ skill.name }}</option>
</select>

当我点击任何选项时,没有任何反应.

我尝试用表而不是选择它,它工作:

<tbody *ngFor="let skill of skills">
  <td> {{ skill.name }} </td>
<td><button class="btn btn-outline-success" height="20" width="20" (click)="onEditClick(skill)">Edit</button></td>
</tbody>

如何使用Select one进行操作？

当我尝试从API获取的JSON中打印数据时,我收到此错误.它确实打印正确但是这个错误出现在控制台上,我不知道如何解决它.

HTML

{{datas[0].dimension}}

TS

datas: Data[];
this.abcService.getDatas().subscribe(datas => {
  this.datas = datas;
  console.log(datas);
});

JSON来自API(console.log)

(1) [{…}]
0:
  dimension:"bla bla bla"
__proto__:Object
length:1

控制台完全错误

ERROR TypeError: Cannot read property '0' of undefined
    at Object.eval [as updateRenderer] (GraphicsComponent.html:11)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13113)
    at checkAndUpdateView (core.es5.js:12260)
    at callViewAction (core.es5.js:12620)
    at execComponentViewsAction (core.es5.js:12552)
    at checkAndUpdateView (core.es5.js:12261)
    at callViewAction (core.es5.js:12620)
    at execEmbeddedViewsAction (core.es5.js:12578)
    at checkAndUpdateView (core.es5.js:12256)
    at callViewAction (core.es5.js:12620)

DebugContext_ {view: {…}, nodeIndex: 17, nodeDef: {…}, elDef: {…}, elView: {…}}
component: (...)
componentRenderElement:(...) …

我正在尝试使用PieceLabel插件来显示图形内的标签,但它不起作用.图形显示正常,这是我的代码:

TS

import * as Chart from 'chart.js'
import * as ChartPiece from 'chart.piecelabel.js'

ngAfterViewInit() {
  this.canvas2 = document.getElementById('myChartPie');
  this.ctx2 = this.canvas2.getContext('2d');
  let myChartPie = new Chart(this.ctx2, {
    type: 'pie',
    data: {
        labels: ["one", "two", "three", "four"],
        datasets: [{
            label: '# of Score',
            data: [11,21,31,41],
            backgroundColor: [
                'red',
                'blue',
                'orange',
                'green'
            ]
        }]
    },
    options: {
            responsive: false,
      display:true,
      pieceLabel: {
    mode: 'value'
  }
    }
  });
}

我用npm install --save安装了Chart.js和Chart.piecelabel.js.我试着将它添加到.angular-cli.json文件中,但似乎没有任何效果:

"scripts": [
        "../node_modules/chart.piecelabel.js/build/Chart.PieceLabel.min.js"
      ]

HTML

<canvas id="myChartPie" width="650px"></canvas>

看起来我的PieceLabel.min.js没有被调用/识别,我不知道为什么

我有一个代码,在选择下拉列表后更新Graphic的数据.但是,当我选择一个选项时,它看起来像新的Graphic和旧的Graphic同时停留在同一个画布上.

这是我的代码:

funcao(){

  this.graphicService.getDatas().subscribe(datas => {
        this.datas = datas; //Gets the data from the API and put on local datas variable

        if(this.data[0].dimension == "Tech")
        {
          this.counter=0;
        }
        else if(this.data[0].dimension == "Bus"){
          this.counter=1;
        }
              this.barChartData = { //Bar graphic data
                  labels: ["Entry", "Foundation"],
                  datasets: [{
                      label: this.datas[this.counter].subdimensions[0].name,
                      backgroundColor: 'rgba(37, 230, 131,0.7)'
                      data: [
                          this.datas[this.counter].subdimensions[0].entry,
                          this.datas[this.counter].subdimensions[0].foundation
                      ]
                  }]

              };

              this.canvas = document.getElementById('myChart');
              this.ctx = this.canvas.getContext('2d');

              let myChart = new Chart(this.ctx, { // Bar graphic configs
                     type: 'bar',
                     data: this.barChartData,
                     options: {
                         scales: …

我正在尝试在本机反应应用程序上实现谷歌的语音到文本，但我找不到有关它的示例或文档，我对反应本机相当陌生，所以我有点迷失了，有一个使用的示例谷歌官方文档上的node.js，我试图将其“复制”到react-native，但我没有取得任何成功。

这是 Node.js 示例：

async function main() {
  // Imports the Google Cloud client library
  const speech = require('@google-cloud/speech');
  const fs = require('fs');

  // Creates a client
  const client = new speech.SpeechClient();

  // The name of the audio file to transcribe
  const fileName = './resources/audio.raw';

  // Reads a local audio file and converts it to base64
  const file = fs.readFileSync(fileName);
  const audioBytes = file.toString('base64');

  // The audio file's encoding, sample rate in hertz, and BCP-47 language code
  const …