問題タブ [column-chart]

highcharts、google charts、amcharts、d3jsなどの JavaScript ライブラリを使用して、次のようなグラフを作成できるかどうか疑問に思っていました。

画像でわかるように、上部には各列にプロットされた 3 つの値の概要があるため、これらすべての情報を表示できる上部にカスタム軸ラベルが必要です。

また、プロットされた各値には、値 (価格)、名前、および属するセグメントを含む長方形のボックスもあります。

google.visualization.ColumnChart を使用して Google マップのマーカーをクリックするとポップアップする縦棒グラフを作成しました。縦棒グラフが埋め込まれている div が作成されました。

それは正常に動作しますが、私の問題は私が必要としないスクロールバーです.So、チャートからスクロールバーを取り出す方法を誰でも好むことができます.

そして、これは縦棒グラフの私のコード部分です

私はすでにこの SO Q/Aを見ましたが、どういうわけか要件に適合できませんでした。

だから、これで私を助けてください。そして、前もって感謝します

これでハイチャートの縦棒グラフを使用しています。アカウントのGoogleアナリティクスデータから取得した日付形式でx軸を表示したいのですが、x軸に日付を表​​示したいのですが、形式iではありませんフォーマットされた方法でそれをしたい。「20151001」のようになり、「2015 年 1 月 10 日」のようにしたい 私のデータは Google 分析アカウントから来ているので、ハイチャート データを使用することはできません これが私のコードです

日付を取得するPHPコード

$date の var_dump によって、次の形式で日付を取得します。

ここから編集されたコード

x軸に日付または月の名前を付けた序数目盛を使用して、複数系列の縦棒グラフを作成しています(時間目盛は使用していません)。サービスにアクセスして段階的にプルしながら、提示する日付または月ごとの膨大なデータがあります。rangeBands または rangeRoundBands メソッドにより、列が縮小され、描写が svg 幅に制限されます。

列で何らかの操作を提供しながら、水平方向にスクロールできるようにする必要があります。そのために、div と別の SVG doc を使用して、すべての列とその親 SVG 'g' 要素をforeignObject 内に描画しました。

さて、使用可能なスペースに収まらずに列が水平に広がるように、rangeRoundBands を回避する方法はありますか。

ユーザーが手動で処理できるスライダーに基づいてバーの高さを変更しようとしています。

http://jsfiddle.net/h0ow9kLk/2/ 例のコード:

HTML

Javascript

したがって、更新コード: chartColumn.series[0].data[0].value[0].update(parseInt(fuel));

一番下は、最初のバーを更新しようとするために使用されます。ただし、パスが間違っていると思いますが、バーの高さが変化していません。

私がやろうとしていることの例は、これ http://jsfiddle.net/ZmnWq/74/です

正しいパスを使用してデータに到達する方法を学ぶことができる場所はありますか?可能であれば、データ値を変更する方法を誰かに教えてもらえますか?

この質問は非常に基本的に聞こえますが、私はこれに本当に慣れていません。すべての助けに感謝します！

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

こんにちは、私はGoogleの縦棒グラフを持っていて完璧に動作しますが、ブラウザのサイズを変更すると縦棒グラフがオーバーフローし、サイズが変更されません。私のウェブサイトはレスポンシブで、棒グラフをそのように配置したくありません。縦棒グラフをレスポンシブにするにはどうすればよいですか?

この縦棒グラフは developers.google.com/chart/interactive/docs/gallery/columnchart から取得しました

ここにコードがあります

div から width="100%" も追加しようとしましたが、まったく機能しません。