問題タブ [c3]

d3 javascript グラフ作成ライブラリのラッパーとして c3 を使用しています。独自のデモでも、データが更新されるとスクロール バーが一瞬ちらつくことがわかります。

彼らの場合のように、ページにすでにスクロールバーがある場合、これは問題ではありません。ただし、ページが小さい場合、追加や突然の削除、またはスクロールバーが不快になる可能性があります.

私たちは彼らの例と大きく異なることはしていません。謎は、スクロールバーがジャンプする理由です。何か案は？私のコードを見たいなら、それは打撃です：

データは、SignalR を使用して AngularJS ディレクティブに渡されます

正規化されたデータを取得した後、単純に配列に設定されてから C3 に渡されます

いくつかの幅制限を設定して、凡例テキストを折り返すようにしようとしています。何を試しても、「.c3-legend-item-event」の幅を狭めて2行以上にする方法がわかりません。そうしないと、テキストが長すぎてhtmlの外に出ます。

凡例は次のように設定されています: legend: {position: 'inset'} そして、グラフの右側に移動しましたが、2 行以上に折り返すことも、分割することもできません。

簡単に変更できる独自の Legend を追加するために jQuery を使用して例を読みましたが、それは避けたいと思います。また、データ フィードを制御することもできず、凡例のテキストを短くすることもできません。

ソースコードを表示するために使用しているグラフへの参照は次のとおりです: http://c3js.org/samples/chart_bar.html

凡例のオプションと設定への参照はこちら: http://c3js.org/reference.html

これが私のコードの一部です：

どんな助けでも大歓迎です。

ありがとうございました。

c3 で作成された円グラフのラジオ入力を含むカスタム凡例を作成しています。D3 API 経由で無線入力を作成します。ラジオ入力側のテキストを表示できませんでした。

CSSは次のとおりです。

どれも効果がありません。これが私の完全な jsfiddleです。私が間違っていることは何ですか？

私はc3.jsのコード用に開発しましたが、x軸のティックフォーマットは多くの年と月が表示されています,特定の年と月を表示することはできません.c3.jsでd3.jsライブラリを使用する方法.私が開発した特定のコード。

C3.js(c3js.org) を使用してグラフを作成しようとしていますが、データ (およびそのグラフに固有のその他の小さな偏差) 以外のすべてを指定してから、そのバリエーションのすべてのグラフにそれを再利用したいと考えています (aチャートの特定の構成)。

C3.js について私が見つけたすべてのドキュメントとすべての例は、単一のグラフの作成方法のみを扱っています。これを複数のチャートに適用すると、多くのコードが繰り返されることになり、変更を加える際の一貫性が保証されません。

これに関連して私が見つけた唯一のことは、D3.js (d3js.org) で再利用可能なグラフを作成するという概念、 C3.js で使用される基本的なライブラリ、およびその概念に触発された実装です。C3.js が提供する高レベルの抽象化が必要なため、これはあまり役に立ちませんが、これらは私が探しているものについてのアイデアを提供してくれるかもしれません。

これに関する情報は見つかりませんでしたが、1 つのアイデアは、既存のタイプに基づいているが追加の構成も含むチャート タイプを作成することです (たとえば、既存の「棒」チャートに基づいて「horizo​​ntalbar」と呼ばれる新しいチャート タイプを作成します)。タイプ）。

これは私が作成したbindtoチャートcolumnsで、このチャートのユニークな部分です。残りはテンプレートの一部である必要がありますが、方法がわかりません。

C3jsチャートはイベントをリッスンしますresize。チャートを自動的にレスポンシブにするのは良いことですが、 Foundationの Reveal modal でチャートを連携させようとすると、重大なパフォーマンスの問題が発生しました。

github issue Reveal modal triggers a resize eventresizeで述べたように、モーダルが開くたびに明らかにモーダルがイベントをトリガーします。

C3jsresizeチャートは、イベントがトリガーされるたびに再レンダリングされます。また、 C3jsresizeが提供する API またはコールバックを使用して、イベント後にチャートを再レンダリングすることを防ぐ方法はないようです。したがって、同じページ内のすべてのC3jsグラフは、モーダルが開くたびに不必要に再描画され、ブラウジング エクスペリエンスが損なわれます。

Foundationが v6 で明らかにモーダルを処理する方法を変更する前に、このパフォーマンスの問題を回避する簡単な方法はありますか?

使用されているバージョンは C3-0.4.9 とfoundation-5.5.1 です

序文として、目標を達成するためにすでに多くの方法を試しており、現在は「最良の」解決策で休んでいますが、「素晴らしい」と考えるものにはまだほど遠いです...だから私はここで提案を得ることを望んでいました。これは Visual Studio 2010 を使用した C# です。

私のプログラムは、歌詞を含む可能性のあるメタデータを伴うオーディオ ファイルを再生します。歌詞がある場合、ユーザーは歌詞を一度に 1 つのフレーズを表示するか、オーディオと共にスクロールするかを選択できます。これは、1 行のラベルで行われます。フレーズ全体に色を付けたりするようなカラオケ スタイルではなく、文字通り歌詞が音楽に合わせて左から右にスクロールします。

DoubleBuffering を有効にしたり無効にしたりしてみました。有効にすると改善されますが、それでも完全ではありません。

1) 実行時にラベルの Graphics オブジェクトを作成すると、タイマーはその Graphics オブジェクトを使用して Label に直接描画します。グラフィックをクリアすることと、クリアのちらつきを避けるために、グラフィックのサイズの塗りつぶされた長方形を描画することの両方を試みました。これらのいずれかの後、テキスト文字列が描画されます。25 ミリ秒、50 ミリ秒、100 ミリ秒を試してみましたが、ここではほぼ同じ結果が得られました。

2) 実行時にラベルの Graphics オブジェクトを作成すると、タイマーがラベルのサイズのビットマップを作成し、そのビットマップからグラフィック オブジェクトを作成し、塗りつぶされた四角形を描画し、グラフィック オブジェクトに文字列を描画し、それをコピーします。ラベルのグラフィックス オブジェクトに追加し、ビットマップを Label.Image フィールドにコピーしようとしました。

3) 専用の Graphics オブジェクトが作成されていない。代わりに、タイマーでラベルを無効にします。次に、Label の Paint イベントで、e 引数の Graphics オブジェクトを使用して、塗りつぶされた四角形を直接描画し、テキスト文字列を描画します。

すべての場合において、結果として正しくスクロールされるテキストは、スクロールするとぎくしゃくして読みにくくなりますが、再生を一時停止すると完璧に見えます。描かれるタイミングや内容は正確です。＃3は、私が試した多くのバリエーションの中で「最高」ですが、私が言うように、テキストを読むのはまだ簡単ではありません. タイマーの値が 40FPS と 10FPS の間で変化し、結果の読みやすさに大きな違いがないことを考えると、これは私の描画方法が非効率的であることに帰着していると思います。

私が犯している明らかな間違いや、この動作を引き起こしている根本的な基盤の欠如はありますか? これをどのように改善できるかについて、いくつかの意見をいただければ幸いです。ありがとう。