問題タブ [highcharts-ng]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 動的な ajax データを使用したハイチャート用の AngularJS
Spring MVC と AngularJSおよびAngularJS と Highchartsの 2 つの例を統合して、Javascript と AngularJS を学習しています。
この一見単純なタスクは、数日間私を困惑させました。Spring REST を利用したバックエンドで、ブックの月間または年間の価格を表す double の配列である「価格」プロパティを持つクラス Book を追加しました。AngularJS クライアントは、次のコードを html に追加して「価格」を表示します。
および次のコードをコントローラーに追加します。
テーブルは、バックエンドからのデータで動的に更新されます。かなり清楚でエレガント!
私を困惑させるのは、ハイチャートの部分です。html に以下を追加しました。
そして、コントローラーへの「価格」のいくつかの静的な値:
また、hichcharts は AngularJS で正常に動作します。
次に、コントローラーにコードを追加して、バックエンドからチャートへの動的な「価格」を更新しようとしました。
また
しばらくして、これは AngularJS の非常に素朴な理解であることに気付きました。私もで説明されている方法に従いました
Ajax リクエストからの json データを使用して (angular js を使用して) ハイチャートを作成する方法が成功しませんでした。
ハイチャートがバックエンドからの動的データを表示するための、上記の価格表のような洗練された方法はありますか?
javascript - ポイント マーカーをオフにしても、Highcharts-ng では機能しないようです
highcharts-ngを使用して折れ線グラフのマーカーをオフにしようとしています。
highcharts API を確認しましたが、オプションを渡す必要があると思います。
ただし、これを highcharts-ng で試してみましたが、機能していないようで、かなり困惑しています。これは、このオプションを渡して効果がない、わずかに変更されたストックの例です: http://jsfiddle.net/BnnVN/
javascript - Highcharts-ng ディレクティブ (Angular) が更新されない
ページにグラフを描画するために、 highcharts-ng Angular-JS ディレクティブを使用しています。
コントローラーのデータを更新し、これらの値をグラフに反映できるようにしたいと考えています。ただし、割り当てを使用して $scope 変数を更新すると、たとえば次のようになります。
...その後、グラフは更新されません。グラフを更新できる唯一の方法は、値をデータにプッシュすることです。
...しかし、これは最初に実行されたときにのみ機能します。これが私が何を意味するかを示すJS-fiddleです:http://jsfiddle.net/K6hL8/
私は Angular を初めて使用するので、サード パーティのディレクティブを非難する前に、自分の Angular コードに明らかな問題があるかどうかを確認したいと思いました ($scope と双方向バインディングを誤解している可能性があります)。
前もって感謝します!
編集:
したがって、(このフィドルでは: http://jsfiddle.net/K6hL8/で) AngularがchartData の変更を認識しているように見えますが (アラート付きのウォッチを配置しました)、ウォッチが「true」で呼び出された場合のみです。 「平等のために。ディレクティブのすべてのウォッチが「true」を使用しているため、困惑しています...
angularjs - チャート内のデータの更新、角度のあるハイチャート、ハイチャート-ng
angular、highcharts-ngのhighchartsディレクティブを試しています。https://github.com/pablojim/highcharts-ng
データの更新に問題があります。シリーズ値の更新は問題ありません。しかし、X 軸のタイトルを更新できません。ここに js-fiddle がありますhttp://jsfiddle.net/user1572526/3stqK/2/
私の工場にはchartConfigがあります:
次に、コントローラーで公開します。
そして最後に、いくつかの新しい値を設定する関数
X軸以外はすべて機能します。
ここで何が間違っている可能性がありますか?
angularjs - $apply を強制しない限り、highcharts-ng を使用する angular.js はシリーズの順序を維持しません (すでに進行中のエラーがスローされます)。
これは修正できない可能性がありますが、誰かが以前にこれに遭遇し、回避策を見つけたことを願っていました.
Highcharts-ng は、シリーズの順序を維持できないような方法で、シリーズ データを既存のデータとマージしているようです。具体的には、左から右に 2 つのシリーズを表示し、A & B と呼びます (フォーム コントロールがそのように編成されているため)。
つまり、シリーズ A から始めて、次に B を追加し、次にA を変更すると、B & A の順序になります。
私は highcharts-ng コードを見てきましたが、なぜそれが起こっているのか理解できます (以下の processSeries メソッドを参照してください)。
私が作業に取り掛かることができた唯一の回避策は、シリーズ データを完全にリセットして $apply を呼び出すことです。もちろん、別の適用の途中でこれを行うことはできません。
設定できるオプションがあるかどうか、またはディレクティブの編集に頼らずにこれを希望どおりに使用できる他の回避策があるかどうかを本当に知りたいです。
本当にありがとう!
javascript - ドリルダウン付きハイチャート
angularjs プロジェクトで highcharts-ng を使用しています。すべてうまくいっていましたが、ドリルダウンを使用して情報を詳しく説明する必要があり、drilldown.js を使用しても機能しません。ハイチャートのドリルダウン トライアウト フィドルの例に従いましたが、angular-ng ではそうではないようです。私のドリルダウン再現でわかるように、元のハイチャートの例は angular-ng では機能しません。何がうまくいかないかについてのアイデアはありますか?
以下のコードは無視してください (stackoverflow はこの質問にいくつかのコードを求めています)。
javascript - Highcharts-ng リセット ズーム
highcharts-ng を使用すると、この問題が発生します。既にチャートにある既存のデータ シリーズに新しいデータ シリーズをプッシュしようとすると、新しいシリーズは古いズームでズームされます。私の質問は、ロード後に新しいシリーズのデフォルト値にズームする方法はありますか?
PS: 関数 zoomOut() は highcharts-ng では機能しません。
とにかく、ありがとう
angularjs - Highchart-ng の境界線が表示されない
境界線を表示できないチャートがあります。
関連するプロパティを設定する私のコード:
境界線を除いて、他のすべては上記のコードで正常に機能します。私がしなければならないことは他にありますか?Highchart フォーラムで同じ質問をしましたが、回答が得られなかったので、ここの誰かが助けてくれることを願っています。