6

ハイチャートでは、x値が-50から+50の範囲で、y値が-100から+100の範囲である散布図をプロットしたいと思います。チャートの中央でゼロで交差するようにx軸とy軸をプロットする方法はありますか？

軸で「オフセット」パラメータを使用してみましたが、これは軸を移動します（例： http： //bit.ly/Xd9Z51 ）が、このアプローチには次の問題があります。

  1. オフセットパラメータを動的に設定することはできないため、シリーズが最小/最大x / y値を更新および変更した場合、軸はゼロで交差しなくなります。
  2. ズームすると、軸がゼロで交差しなくなります。
  3. divサイズ、マージン、タイトルなどを考慮して、ピクセル単位のオフセットを計算するのは非常に困難です。
  4. 含まれているdivのサイズを変更すると、必要な軸オフセット位置が変更されます。
4

1 に答える 1

4

Highchartsv7.2+のソリューション

チャートが軸用のスペースを予約しないようにいくつかのオプションを強制してから、プラグインを使用します。

(function(H) {
  H.addEvent(
    H.Axis,
    'init',
    function(e) {
      if (H.defined(e.userOptions.matchAxis)) {
        H.merge(
          true,
          e.userOptions, {
            labels: {
              reserveSpace: false
            },
            title: {
              reserveSpace: false
            },
            offset: -1,
            opposite: this.isXAxis ? true : false
          }
        );
      }
    }
  );

  H.addEvent(
    H.Chart,
    'render',
    function() {
      let chart = this;

      chart.axes.forEach(function(axis) {

        let newOffset,
          matchAxis = axis.options.matchAxis,
          translate = axis.horiz ? 'translateY' : 'translateX',
          newTranslation = {},
          offset = axis.options.offset || 0,
          crisp = axis.options.lineWidth % 2,
          otherAxes = axis.isXAxis ? chart.yAxis : chart.xAxis;

        if (H.defined(matchAxis)) {
          newOffset = otherAxes[matchAxis.index || 0].toPixels(matchAxis.value || 0, true);

          newTranslation[translate] = newOffset + offset + crisp;

          if (axis.axisGroup) {
            axis.axisGroup.animate(newTranslation);
          }
          if (axis.labelGroup) {
            axis.labelGroup.animate(newTranslation);
          }
        }
      });
    }
  );
})(Highcharts);

デモ：https ：//jsfiddle.net/BlackLabel/2k0bw6q3/

プラグインのAPI：

  • x/yAxis.matchAxis.value-反対軸から選択する値を設定します。デフォルトは0です。
  • x/yAxis.matchAxis.index-複数の軸を使用する場合は、計算に使用する反対の軸のインデックスを設定します。デフォルトは0です。

たとえば、設定yAxis.matchAxis = {}は完全に問題ありません：https ://jsfiddle.net/BlackLabel/qwyczoxb/ （デフォルトのため）

（プラグインで）強制されるオプションのリスト：

  • x/yAxis.labels.reserveSpace偽に
  • x/yAxis.title.reserveSpace偽に
  • x/yAxis.offset負の値（例：-50）
  • xAxis.oppositetrueに設定されています
  • yAxis.oppositefalseに設定されています

注：v7.2.0でのみテスト済み

古いソリューション（v3 +）

現在のところ、唯一の解決策はオフセットパラメータを使用することです。ただし、Highcharts 3.0以降では、そのプロパティを自由に制御し、軸を更新できます。

chart.yAxis[index].update( options );

ここで、optionsは、オフセットを含むyAxisのオプションを持つオブジェクトです。ピクセル位置を取得するには、内部関数を使用できますchart.xAxis[index].translate(value)（少しハッキーですが、機能します）。したがって、両方を組み合わせる場合は、例を参照してください：http: //jsfiddle.net/UGpPV/6/

于 2013-03-01T12:29:27.403 に答える