5

同じグラフに2つの一連のデータを表示しようとしています。最初のシリーズ（つまり、引用符の数）には、正の整数（および0）のみを含めることができます。2番目のシリーズ（つまり、売上値）には、正と負の両方のフロート値を含めることができます（不思議に思うかもしれませんが、負の値はクレジットノートの発行に起因します）。

添付の画像に示されているように、2番目の系列に負の値が含まれている場合、2つの系列のデータの0ポイントの「ベースライン」が共有されなくなるという問題があります。

忙しい猫

Y軸の「最小」オプションを0に設定しようとしましたが、負の値に関する洞察が失われます。

また、最初の系列の最小値を2番目の系列の最小極値に等しくなるように設定しようとしましたが、残念ながら、これでは列のスケーリングがうまくいきません（各Y軸の値は完全に異なるスケールであるため、つまり、 ：10秒対1000秒）。

0ポイントの「ベースライン」が共有されるようにチャートを構成するにはどうすればよいですか？言い換えると、青い列を緑の0ポイントと同じベースラインから開始するにはどうすればよいでしょうか。

アップデート

リンガーの答えは正しい方向への一歩です。両方の軸にとを設定するminとtickinterval、うまくいきます。ただし、値は変数データに基づいて動的に決定する必要があります。

チャートを生成する前に、これらminとtickinterval値を決定する方法に関するヒントはありますか？

その間に私はそれについていくつか考えました。左軸（青/引用符）に関連付けられた値は常に正であり、ゼロから始まります。したがって、ゼロ点の下に表示するティック数を決定するのは右軸（緑/売上）です。これで、highchartsが青と緑の両方に最適なスケールを自動的に決定するので、私がする必要があるのは、左軸の最小値を次のように設定する方法を見つけることです（疑似コードを許してください）。

var factor = right_axis.min / right_axis.tickinterval;

left_axis.min = factor * left.tickinterval;

注：参照APIのAxisの下にsetExtremes（）メソッドがあることを確認しましたが、これには、最初にグラフを初期化してから、戻ってその左軸を更新する必要があります。チャートを描く前にこれをしたいと思っています。おそらく私は何か明らかなものを見落としていますか？

ありがとう。

4

2 に答える 2

3

このjsfiddleモックアップに示されているように、yaxisのtickIntervalとminの組み合わせを使用して、要求しているものを制御できます。

編集

XMLを読み込んでいる間、コードでは、最低値が何であるか、また販売側で最高値が何であるかを追跡する必要があります。次に、それらが特定の値を満たしている場合に、それらの値をどのように表示するかを決定します。その後、ifステートメントを使用して値を設定します。ここにいくつかの例があります。

Low less than -50 and greater -90
With High less than 400
Primary Axis: min: -2, tickInterval: 1,
Secondary Axis: min: -100, tickInterval: 50

例

Low less than -50 and greater -90
With High greater than 400
Primary Axis: min: -1, tickInterval: 1,
Secondary Axis: min: min: -100, tickInterval: 100,

例

一次軸の最小値がどうあるべきかを理解するには、二次軸の最小値をそのtickIntervalで割るだけです。その場合、主軸のtickIntervalは常に1になります。

于 2012-06-13T18:41:42.833 に答える
0

この軸に関連する最大系列値に基づいて2番目の軸の目盛り位置を計算し、最初の軸の目盛り位置を計算して、同じ量の目盛りと0行を共有することもできます。

メソッドを使用axis.update()すると、プロパティを使用して2番目の軸の目盛りの位置が更新されますtickPositions。

loadイベントの例。ポイントを動的に追加する場合、最初の軸の目盛りが変わるたびに、それらの計算を行い、目盛りの位置を更新する必要があることに注意してください。

  chart: {
    type: 'column',
    events: {
      load: function() {
        var chart = this,
          yAxis = this.yAxis,
          max = yAxis[1].dataMax,
          positiveTicksAmount = 0,
          negativeTicksAmount = 0,
          tickPositions = [],
          tickInterval,
          min,
          i;

        yAxis[0].tickPositions.forEach(function(tick) {
          if (tick > 0) {
            positiveTicksAmount++;
          } else if (tick < 0) {
            negativeTicksAmount++;
          }
        });

        tickInterval = max / positiveTicksAmount;

        for (i = negativeTicksAmount; i > 0; i--) {
          tickPositions.push(-tickInterval * i);
        }

        for (i = 0; i <= positiveTicksAmount; i++) {
          tickPositions.push(
            tickInterval * i
          );
        }

        yAxis[1].update({
          tickPositions: tickPositions
        });
      }
    }
  },

Jsfiddleの例：
https ：//jsfiddle.net/wchmiel/84q0sxrt/
http://jsfiddle.net/wchmiel/nuj7fagh/

Apiリファレンス：
https ：//api.highcharts.com/class-reference/Highcharts.Axis#update
https://api.highcharts.com/highcharts/yAxis.tickPositions

于 2018-10-09T09:00:59.133 に答える