2017-10-06 4 views
1

グラフを動的に受け取る特定のパフォーマンスメトリックを表示するChart.jsで作成したグラフがあります。私がしなければならないことの1つは、背景に赤、黄、緑の3つのバンドを描き、メトリクスの値が良い、悪い、または平均であるかどうかをユーザーに視覚的に伝えることでした。私はchart.jsのライン版を拡張し、キャンバスに色のバンドを描く描画関数でそれを行いました。Chart.jsバックグラウンドの一部を動的に再ペイントする

可能な限り大きな値がわかっていればうまくいきます。次に、その値としてmax tickを定義し、その同じ値をトップポイントとして使用して赤いバンドを描画することができます。しかし、大きな値が到着するとすぐに、チャートが自動的にそれに対応するように自動的に拡大し、赤いバンドの上に白いバンドが表示されます。

バックグラウンドの一部がインスタンス化された後に動的に再描画する方法はありますか?私が考えることができたのは、背景を再描画するために "animation.onComplete"ハンドラを追加することだけでした。しかし、問題は、受け取った次の値に対して、私の新たに描かれた背景が消えてしまうので、私はそれを間違った方法で行うと仮定します。

+0

これは、https://stackoverflow.com/questions/41210840/obtain-max-value-of-y-axis-of-line-chart-rendered-with-chart-jsのヘルプですか? –

答えて

1

これは役に立つかもしれませんが、Chat.jsでの私の経験に基づいて私が働いてきたアプローチは、Chat.jsオプションを1回だけ作成してチャットデータオブジェクトは、新しいレコードがあるたびに再作成されます。これは実際に私のために働くtho、私はあなたのために働くことを願っています。