ドロップダウンメニューをクリックしてAngular2でng2チャートを表示するにはどうすればよいですか?

Y_Lakdime

ユーザーがボタンを押すと、ページにopを表示するチャートが必要です。このhtmlをinnerHTMLに書き込みたい:

<div style="display: block">
<canvas baseChart
      [datasets]="barChartData"
      [labels]="barChartLabels"
      [options]="barChartOptions"
      [chartType]="barChartType"
      [legend]="barChartLegend"></canvas>
</div>

このようにコピーしようとしましたが、チャートにopが表示されません。物性がよく読めないと思います。

document.getElementById("info").innerHTML = " <div style=\"display: block\">\n" +
  "  <canvas baseChart\n" +
  "          [datasets]=\"barChartData\"\n" +
  "          [labels]=\"barChartLabels\"\n" +
  "          [options]=\"barChartOptions\"\n" +
  "          [chartType]=\"barChartType\"\n" +
  "          [legend]=\"barChartLegend\"></canvas>\n" +
  "</div>  some text <br>\n" +
  "  some more text: <strong> "+ this.item + "</strong><br>\n" +
  "\n" +
  "  some more text:  <br>\n" +
  "  Monday: <strong> " + this.percentMonday + "%</strong>  <br>\n" 

ただし、htmlファイルに入れると正しく表示されます。どうすればこれを達成できますか?前もって感謝します

   div class="dropdown" dropdown [dropdownToggle]="false">
  <button class="btn btn-primary" dropdown-open>Kies een stad voor meer info</button>
  <ul class="dropdown-menu">

    <li value="Amsterdam" (click)="goToAmsterdam()"><a>Amsterdam</a></li>



  </ul>

</div>
マイケルチェコウスキー

必ずしも使用する必要がない場合は、非常に簡単ですinnerHTML。まず、Angular(2)を使用している場合は、ネイティブJavaScriptを使用しないでください。次に、この行をコードに追加するだけです。

対応するコントローラー内のJS:

//...
export class YOURCOMPONENT implements OnInit {
  showChart: boolean; // store toggle state of the chart

  constructor () { }

  ngOnInit(): void {
    this.showChart = false; // hide chart at the beginning
  }
}

HTML:

<div *ngIf="showChart">
    <canvas baseChart
      [datasets]="barChartData"
      [labels]="barChartLabels"
      [options]="barChartOptions"
      [chartType]="barChartType"
      [legend]="barChartLegend"></canvas>
</div>
<button (click)="showChart=!showChart">Toggle Chart</button>

(click)="showChart=!showChart"ボタンをクリックすると、の値がshowCharttrueからfalseに、またはその逆にスワップすることを意味します

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ドロップダウンメニューをクリックしてパネルを非表示にするにはどうすればよいですか?

分類Dev

ナビゲーションバーの2回目のクリックでブートストラップドロップダウンメニューを非表示にするにはどうすればよいですか?

分類Dev

スクリーンキャプチャブラウザのブックマークドロップダウンメニューを表示するにはどうすればよいですか?

分類Dev

jQueryメニューのクリック時にドロップダウンを1つだけ表示するにはどうすればよいですか?

分類Dev

バニラJSのメニューリンクをクリックしたときにドロップダウンメニューを非表示にするにはどうすればよいですか?

分類Dev

ユーザーがドロップダウンの側面をクリックしたときにドロップダウンメニューを非表示にするにはどうすればよいですか?

分類Dev

親liをクリックしたときにドロップダウンメニューリストを開くように設定するにはどうすればよいですか?次にjavascriptを使用してサブliを開きますか?

分類Dev

ドロップダウンの他のメニューがクリックされたときにBoostrapドロップダウンサブメニューを非表示にするにはどうすればよいですか?

分類Dev

Angular 2でng2ファイルをアップロードして投稿データを送信するにはどうすればよいですか?

分類Dev

ドロップダウンメニューを取得してGoogleマップに表示するにはどうすればよいですか?

分類Dev

リストを使用してドロップダウンメニューを作成するにはどうすればよいですか

分類Dev

HTMLでjQueryを使用してドロップダウンメニューを正しく表示するにはどうすればよいですか?

分類Dev

cssを使用して上部に矢印の付いたドロップダウンメニューを表示するにはどうすればよいですか?

分類Dev

ドロップダウンメニューの展開中に2回目のクリックでリダイレクトを有効にするにはどうすればよいですか?

分類Dev

グリッドビューで更新をクリックしたときにドロップダウンメニューを表示するにはどうすればよいですか?

分類Dev

Angular テクニックを使用して Angular2 で作業ツールチップを作成するにはどうすればよいですか?

分類Dev

ホバーしてハンバーガーメニューの色を変更し、ハンバーガーメニューをクリックしてxに変換し、コンテンツのドロップダウンを表示するにはどうすればよいですか?

分類Dev

複数のコンポーネント/テンプレートを同じビューに配置し、Angular2を使用してドロップダウンリストアイテムに基づいて表示するものを選択するにはどうすればよいですか?

分類Dev

ドロップダウンメニューをクリックしたときにキャレットの移動を停止するにはどうすればよいですか?

分類Dev

ユーザーがドロップダウンメニューから選択したパラメーターに基づいてJavaオブジェクトのリストをソートするにはどうすればよいですか?

分類Dev

ユーザーがドロップダウンメニューから選択したパラメーターに基づいてJavaオブジェクトのリストをソートするにはどうすればよいですか?

分類Dev

vuetifyツールバーリンクドロップダウンメニューを作成するにはどうすればよいですか?

分類Dev

セレンを使用して、ドロップダウンメニューをクリックしてhttps://www.phptravels.net/のログインページにアクセスするにはどうすればよいですか?

分類Dev

コードとJSON応答オブジェクトに基づいてドロップダウンメニューリストを表示するにはどうすればよいですか?

分類Dev

<ul>をドロップダウンメニューにするにはどうすればよいですか?

分類Dev

選択したオプションをmongoDBでドロップダウンメニューに表示するにはどうすればよいですか?

分類Dev

kivyドロップダウンメニューを作成するにはどうすればよいですか?

分類Dev

ドロップダウンメニューを追加するにはどうすればよいですか?

分類Dev

ドロップダウンメニューで要素を選択すると、ページにリダイレクトされるようにリンクを追加するにはどうすればよいですか。

Related 関連記事

  1. 1

    ドロップダウンメニューをクリックしてパネルを非表示にするにはどうすればよいですか?

  2. 2

    ナビゲーションバーの2回目のクリックでブートストラップドロップダウンメニューを非表示にするにはどうすればよいですか?

  3. 3

    スクリーンキャプチャブラウザのブックマークドロップダウンメニューを表示するにはどうすればよいですか?

  4. 4

    jQueryメニューのクリック時にドロップダウンを1つだけ表示するにはどうすればよいですか?

  5. 5

    バニラJSのメニューリンクをクリックしたときにドロップダウンメニューを非表示にするにはどうすればよいですか?

  6. 6

    ユーザーがドロップダウンの側面をクリックしたときにドロップダウンメニューを非表示にするにはどうすればよいですか?

  7. 7

    親liをクリックしたときにドロップダウンメニューリストを開くように設定するにはどうすればよいですか?次にjavascriptを使用してサブliを開きますか?

  8. 8

    ドロップダウンの他のメニューがクリックされたときにBoostrapドロップダウンサブメニューを非表示にするにはどうすればよいですか?

  9. 9

    Angular 2でng2ファイルをアップロードして投稿データを送信するにはどうすればよいですか?

  10. 10

    ドロップダウンメニューを取得してGoogleマップに表示するにはどうすればよいですか?

  11. 11

    リストを使用してドロップダウンメニューを作成するにはどうすればよいですか

  12. 12

    HTMLでjQueryを使用してドロップダウンメニューを正しく表示するにはどうすればよいですか?

  13. 13

    cssを使用して上部に矢印の付いたドロップダウンメニューを表示するにはどうすればよいですか?

  14. 14

    ドロップダウンメニューの展開中に2回目のクリックでリダイレクトを有効にするにはどうすればよいですか?

  15. 15

    グリッドビューで更新をクリックしたときにドロップダウンメニューを表示するにはどうすればよいですか?

  16. 16

    Angular テクニックを使用して Angular2 で作業ツールチップを作成するにはどうすればよいですか?

  17. 17

    ホバーしてハンバーガーメニューの色を変更し、ハンバーガーメニューをクリックしてxに変換し、コンテンツのドロップダウンを表示するにはどうすればよいですか?

  18. 18

    複数のコンポーネント/テンプレートを同じビューに配置し、Angular2を使用してドロップダウンリストアイテムに基づいて表示するものを選択するにはどうすればよいですか?

  19. 19

    ドロップダウンメニューをクリックしたときにキャレットの移動を停止するにはどうすればよいですか?

  20. 20

    ユーザーがドロップダウンメニューから選択したパラメーターに基づいてJavaオブジェクトのリストをソートするにはどうすればよいですか?

  21. 21

    ユーザーがドロップダウンメニューから選択したパラメーターに基づいてJavaオブジェクトのリストをソートするにはどうすればよいですか?

  22. 22

    vuetifyツールバーリンクドロップダウンメニューを作成するにはどうすればよいですか?

  23. 23

    セレンを使用して、ドロップダウンメニューをクリックしてhttps://www.phptravels.net/のログインページにアクセスするにはどうすればよいですか?

  24. 24

    コードとJSON応答オブジェクトに基づいてドロップダウンメニューリストを表示するにはどうすればよいですか?

  25. 25

    <ul>をドロップダウンメニューにするにはどうすればよいですか?

  26. 26

    選択したオプションをmongoDBでドロップダウンメニューに表示するにはどうすればよいですか?

  27. 27

    kivyドロップダウンメニューを作成するにはどうすればよいですか?

  28. 28

    ドロップダウンメニューを追加するにはどうすればよいですか?

  29. 29

    ドロップダウンメニューで要素を選択すると、ページにリダイレクトされるようにリンクを追加するにはどうすればよいですか。

ホットタグ

アーカイブ