5

ColdFusion 9 から ColdFusion 11 へのアップデートにより、基盤となるチャート エンジンが WebCharts3D から ZingCharts に変更されました。2 つのライブラリ間の非互換性と<cfchart>タグ内の実装のほとんどの解決策を見つけることができましたが、ColdFusion 9 では発生しなかったアライメントの問題を解決するのに苦労しています。純粋な JavaScript と HTML。

WebCharts3D では、ガイドと目盛りは棒グラフの棒の中央に配置されます。折れ線グラフと棒グラフを組み合わせたものには、棒の中心と折れ線グラフのマーカーを通るガイドがあります。これは、折れ線グラフとまったく同じ動作です。

ZingCharts では、複合チャートまたは棒チャートのガイドとティックはバーの左側に位置し、線のマーカーを通過しません。これは、折れ線のみのグラフとは異なる動作です。x 軸のラベルは、両方のエンジンで完全に中央に配置されています。

ここで例を見ることができます: http://jsfiddle.net/yo3uta96/

問題：

私は、雨、風、気温などを示す統計的な気象データを含む非公開のページを持っています。これらは、互いに下にある多数のチャートで表されます。一部は折れ線グラフ、一部は棒グラフ、一部は複合グラフです。これは動的に作成されるページで、ユーザーは過去 365 日までの日付範囲を選択できます。ページ上のすべてのグラフには、同じ数のデータポイントがあります。表示するデータポイントが 80 を超える場合、棒グラフは面グラフに、折れ線グラフはマーカーのない折れ線グラフに変わります。

私が達成したいこと:

グラフ、データポイント、ガイド、目盛りを x 軸のラベルと同じように並べたいと思います。

私が試したこと：

折れ線のみのチャートにoffsetStartとoffsetEndを追加してデータポイントを並べることができました。複合チャートでは、折れ線チャートの最初のマーカーが対応する最初のバーの中央に配置され、y軸上に配置されなくなるため、これが必要です。折れ線グラフのように。同じことが最後のマーカーにも当てはまります。

残念ながら、オフセットを追加しても目盛りとガイドの位置合わせの問題は解決しません。guides、minorTicks、minorGuides、offsets のほぼすべての可能な組み合わせを試しましたが、役に立ちませんでした。理想的な世界と、すべての x 軸のラベルがグラフに表示されるいくつかのエッジケースでは、ガイドを無効にし、マイナー ティックを 1 に設定するとうまくいく場合があります。ただし、データポイントの数を増やすと、この方法は機能しなくなります。

質問：

ZingCharts がチャート間で完全に整列しているように見える x 軸ラベルを処理するのと同じ方法で、棒グラフと折れ線グラフのガイドと目盛りを同じデータポイント数で整列するにはどうすればよいですか?

4

1 に答える 1

7

以下の修正が ColdFusion 11 の CFChart で機能するとは考えていません。これは、2015 年後半までのバージョンの ZingChart を使用しているためです。ただし、ZingChart の v2.2.2 で、この問題を解決するための変更が追加されました。

scale-x offset:0 を設定すると、スケールはノードの中央に配置され、折れ線グラフのように動作します。「maskTolerance」と呼ばれるプロットエリア内の追加のプロパティを [0,0] に設定する必要があることに注意してください。これにより、バーがスケール y の境界を超えて出血しないようになります。

var myConfig = {
type: "mixed",
plotarea: {
	maskTolerance: [0, 0]
},
scaleX: {
	offset: 0,
	guide: {
		visible: true, //set to false by default on some chart types
		lineColor: "red",
		lineWidth: 1
	}
},
series: [{
	type: "bar",
	values: [35, 42, 67, 79, 25, 34, 67, 85]
}, {
	values: [40, 27, 38, 68, 41, 49, 50, 65]
}]
};

zingchart.render({
id: 'myChart',
data: myConfig,
height: 200,
width: "100%"
});
<!DOCTYPE html>
<html>

  <head>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>

  <body>
  	<div id='myChart'></div>  
  </body>

</html>

于 2016-04-16T17:29:50.717 に答える