2016-11-29 7 views
1

私は奇妙な問題に遭遇しました。私のチャートにはx軸とy軸の行がありません。また、ツールチップボックスにはテキストだけが表示され、ボックス自体は表示されません。nvd3-ng2を使用したグリッド線が見つからない

これは、ng2-nvd3のgithubページのreadmeの「基本的な使い方」セクションのサンプルの個別の棒グラフでもテストしました。

何が原因なのですか?ブートストラップ以外の最小限のスタイルと非常に最小限のHTMLを使って、非常に単純なangular2サイトを設定しました。すべてのスタイルを削除しても問題は解決しません。

他のすべてのチャートは完全に動作します。

Screenshot showing problems with sample bar chart from readme

淡褐色のバーの上にD196.5はツールチップです。あなたはすべてのグリッド線を見ることができ、ツールチップボックスはありません。 https://github.com/ekuusi/nvd3-ng2-grid-issue

サンプルアプリが問題を呈する最小限MEANプロジェクトです:誰かが問題自分自身をテストしたい場合

は、ここでのサンプルアプリです。プロジェクトを実行するには:ローカルフォルダ

  • NPMに

    • コピーすることは
    • NPMの実行をインストール
    • NPMを構築するアプリがlocalhostにリッスン

    を開始:3000。このアプリには、Hello Worldとその問題を示す棒グラフのビューが1つしかありません。

    EDIT:解決済みですが、誰かが同じ問題に遭遇した場合、ここに残しておきます。また、WebpackでAngular 2プロジェクトでng2-nvd3を動作させる方法を見たい場合は、ここにリンクされているレポを自由に使用してください。

  • 答えて

    0

    これで、実装した最終リリースでng2-nvd3を動作させるために必要なWebpackの回避策のために、必要なスタイルが不足していることが判明しました。

    マスタースタイルシートnv.d3.min.cssをnvd3ノードモジュールのプロジェクトフォルダにコピーし、インデックスページにリンクすることでこれを修正しました。

    関連する問題