ZingChartの線グラフと棒グラフの間に垂直ガイドを揃える方法は？

「ColdFusion 9からColdFusion 11へのアップデート」では、基礎となるチャートエンジンがWebCharts3DからZingChartsに変更されました。 <cfchart>タグ内の2つのライブラリとその実装の間のほとんどの非互換性に関する解決策を見つけることができましたが、私はColdFusion 9で発生しなかった配置問題を整理するのに苦労しています。純粋なjavascriptとHTMLを試してみてください。ZingChartの線グラフと棒グラフの間に垂直ガイドを揃える方法は？

WebCharts3Dでは、ガイドとティックは棒グラフの中央に配置されています。線と棒グラフの組み合わせでは、棒グラフの中央と線グラフのマーカーを通るガイドがあります。これは折れ線グラフとまったく同じです。

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

あなたがここでの例を見ることができます：http://jsfiddle.net/yo3uta96/

問題：

私はチャートの数で表され、雨、風、温度などを示す統計気象データとなし、公共のページを持っています1つはお互いの下にある。そのうちのいくつかは折れ線グラフであり、一部は棒グラフであり、一部は結合チャートです。これは、動的に作成されたページで、ユーザーは過去365日間の日付範囲を選択できます。ページ上の各グラフには同じ数のデータポイントがあります。表示するデータポイントが80を超えると、棒グラフはエリアチャートになり、折れ線グラフは折れ線グラフになり、マーカーなしになります。

私が達成したい何

：

私はチャート、データポイント、ガイドとx軸ラベルがそうであるように同じように並んでダニを持っていると思います。私が試したどの

：Iライン専用にチャートoffsetStartとoffsetEndを追加することによってデータポイントを整列するために管理

組み合わせチャートで折れ線グラフの最初のマーカーが配置されているので、これはnecessearyされた中心対応する第1の棒は、もはや折れ線グラフのようにy軸に座らない。最後のマーカーも同じです。

オフセットを追加しても、ダニやガイドの調整に問題はありません。 Guide、minorTicks、minorGuides、オフセットを使用することでほぼすべての組み合わせを試してみました。理想的な世界では、すべてのx軸ラベルがチャートに表示されるいくつかの縁があり、ガイドを無効にしてマイナーダニを1に設定すると効果があります。しかし、この方法は、データポイントの数を増やすと機能しなくなります。

質問：

がどのようにガイドをラインアップし、完璧にグラフ全体に整列しているように見えるZingChartsハンドルのx軸のラベルと同じ方法で、データポイントの数が同じで棒グラフと折れ線グラフにダニができますか？

出典

2016-04-16 Andreas Schuldhaus

それがあまりにもサポートされている場合、私は好奇心旺盛です。周りを素早く見て、アラインメント属性（ "center"または "node"）を記述した非常に古いバージョンの[change note]（http://www.zingchart.com/docs/changelog/）を見ました。何の影響もないようで、推奨されていないことが示唆されています。（* EDIT *）：マイナーダニは気にしないでください。データポイントが増えたときにそれらが機能しなくなったことに注意してください。 http://jsfiddle.net/yo3uta96/2/ *（編集）* – Leigh

@Leigh - 参照するために、そのページは古くなっているようです。最新のchangelogがあります：http://www.zingchart.com/docs/reference/change-log/ –

@ mike-schultz - 間違ったリンクを投稿しました:-)更新したものを投稿していただきありがとうございます。 – Leigh

ColdFusion 11のCFChartsで、ZingChartの2015年後半のバージョンを使用していますが、この問題の解決策を示すZingChartのv2.2.2に変更が加えられたため、以下の修正が機能しないと思います。

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

var myConfig = { 
 
type: "mixed", 
 
plotarea: { 
 
\t maskTolerance: [0, 0] 
 
}, 
 
scaleX: { 
 
\t offset: 0, 
 
\t guide: { 
 
\t \t visible: true, //set to false by default on some chart types 
 
\t \t lineColor: "red", 
 
\t \t lineWidth: 1 
 
\t } 
 
}, 
 
series: [{ 
 
\t type: "bar", 
 
\t values: [35, 42, 67, 79, 25, 34, 67, 85] 
 
}, { 
 
\t 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> 
 
    \t <div id='myChart'></div> 
 
    </body> 
 

 
</html>

出典

2016-04-16 17:29:50

コードサンプルをありがとうございました。直近のZingChartライブラリを使用しているときに魅力的です。残念ながら、ZingChartの現在のColdFusion実装については正しいです。オフセット：0はまったく効果を示さない。 –

ZingChartの線グラフと棒グラフの間に垂直ガイドを揃える方法は？

答えて

関連する問題