ハイチャートのゾーンでパターンを指定するときにデフォルトの色を使用する方法

パトリック・グレゴリオ

Highcharts.js作成された複数のシリーズの縦棒グラフがあります。グラフには、傾向に基づいた予測値のゾーンがあります。これらを実際のライブデータと視覚的に区別したいと思います。

縦棒グラフに、実際のデータを単色(テーマのデフォルトの色を使用-色オプションは提供されていません)で表示し、同じ色を使用して投影値の対角パターンを表示したいと思います。

私は次のようにPHPからのオプションをJSONとして渡します:

$h_series['zoneAxis'] = 'x';
$h_series['zones'] = array(
  array('value' => $zone_start),
  array(
    'color' => array(
      'pattern' => array(
        'path' => array(
          'd' => 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
          'strokeWidth' => 2
        ),
        'width' => 10,
        'height' => 10,
        //'color' => '#feafea'
      )
    )
  )
);

ご覧のとおりcolor、シリーズで元の色を維持したいので、ゾーンオプションは指定しませんしかし、colorオプションを削除すると、黒いパターンが表示されます。

私はこの例を見ましたが、これは私が達成したいことですが、色は手動で指定されています。すべてがデフォルトの色を使用するように、色を指定したくありません。


追加情報

私はスプライングラフに似た何かをしています:

$total_series['zoneAxis'] = 'x';
$total_series['zones'] = array(
  array('value' => $zone_start),
  array('dashStyle' => 'dot')
);

どういうわけかこれは完璧に機能し、スプラインの色を保持し、ポイントが指定されたゾーン内にあるときに実線から点線に変更されました。これは私が達成したいことです。ゾーン内にある場合は、ソリッド列をストライプ列に変更するだけです。


例が欲しい人のためにフィドルを作りました

Highcharts.chart('container', {
  xAxis: {
    plotBands: [{
      color: 'rgba(68, 170, 213, 0.1)',
      from: 2.5,
      to: 4.5
    }]
  },

  series: [{
    type: 'column',
    data: [29.9, 71.5, 106.4, 129.2, 144.0],
    zoneAxis: 'x',
    zones: [{
      value: 3
    }, {
      color: {
        pattern: {
          path: {
            d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
            strokeWidth: 3
          },
          width: 10,
          height: 10
        }
      }
    }]
  }, {
    type: 'column',
    data: [41.2, 25.6, 30.0, 101.6, 175.2],
    zoneAxis: 'x',
    zones: [{
      value: 3
    }, {
      color: {
        pattern: {
          path: {
            d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
            strokeWidth: 3
          },
          width: 10,
          height: 10
        }
      }
    }]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>

<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>

Wojciech Chmiel

ゾーンでは機能していないようです。

パターンの色をデフォルトのシリーズの色として設定することによってのみ、それを実現できます。

zones: [{
    value: 3
}, {
    color: {
    pattern: {
        path: {
        d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
        strokeWidth: 3
      },
      width: 10,
      height: 10,
      color: Highcharts.defaultOptions.colors[0]
    }
  }
}]

デモ:

または、chart.events.loadコールバックを使用して自動的に設定します。

  chart: {
    events: {
      load: function() {
        var chart = this;

        chart.series.forEach(function(series) {
          series.points.forEach(function(point) {
            if (typeof point.color !== 'string') {
              point.update({
                color: {
                  pattern: {
                    path: {
                      d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
                      strokeWidth: 3
                    },
                    width: 10,
                    height: 10,
                    color: series.color
                  }
                }
              }, false)
            }
          });
        });

        chart.redraw();
      }
    }
  }

デモ:

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

欠落データのハイチャートをデフォルトで0にする方法

分類Dev

チャートプロパティのイベントロードでchart.renderer.textを使用して、デフォルトのツールチップと同等のカスタムツールチップをマウスオーバーに配置する方法

分類Dev

チャート上のデータポイントを条件付きでフォーマットする方法

分類Dev

ハイチャートヒートマップゾーンのpattenObjectsは、色軸によって適用される色を尊重できますか?

分類Dev

ハイチャートの日付ツールチップをフォーマットしてタイムゾーンを表示する

分類Dev

Babelウォッチャーを使用してトランスパイルするときに親の「src」ディレクトリを無視する方法

分類Dev

シート上のハイパーリンクを開き、画像をフォルダごとに保存する方法

分類Dev

ハイチャート:チャートでデフォルトのエクスポートオプションを取得する方法は?

分類Dev

htmlハイパーリンク「a」タグのデフォルトのリンク色を削除するにはどうすればよいですか?

分類Dev

ランチャーのフォント、フォントサイズ、フォントの色を取得することはできますか?

分類Dev

HTML5ビデオ要素のデフォルトのフルスクリーンボタンを押したときにフルスクリーンイベントをキャプチャするにはどうすればよいですか?

分類Dev

Spring構成でデフォルトのロケールとタイムゾーンを初期化する

分類Dev

xaxisデータラベルをバーのハイチャートと同じ色にする

分類Dev

レコードをMySqlからPostgresに移行するときに、Railsでクエリのデフォルトのタイムゾーンを設定する方法、または日時値のオフセットを設定する方法

分類Dev

ハイチャートでデータホバーラインの色を変更する

分類Dev

フォームxamarinでスイッチが「オン」(青から緑)のときにデフォルトの色を変更する方法。iOSのデフォルトではGReenですが、Androidでは青色です

分類Dev

パラメータを必要とするデフォルトのハンドラーでRedirectToPageを使用するにはどうすればよいですか?

分類Dev

異なるデフォルトの色とインターフェースを使用するmatplotlib

分類Dev

ハイチャートバブルグラフを拡大するときにdataLabelsのフォントサイズを変更する

分類Dev

python-docxは、ドキュメントをインポートするときにフォントの色とスタイルを保持できますか?

分類Dev

Spring Boot Jackson Dateシリアル化でデフォルトのタイムゾーンを適用する方法

分類Dev

ハイチャートカスタムボタンホバーし、デフォルトで色の変更を押します

分類Dev

パンダでデータフレームをループするときにif / elseステートメントを使用する最速の方法

分類Dev

ハイチャートでドリルダウンするときにタイトルを変更する

分類Dev

yiiでデフォルトのタイムゾーンを設定する方法は?

分類Dev

デフォルトの日付と時刻に間違ったタイムゾーンを保存する

分類Dev

異なるデフォルトのファイルパーミッションを持つコンピューターで送信するときにgitcommitでファイルパーミッションを処理する方法

分類Dev

DataGridでハイパーリンクのフォントの色を変更する方法

分類Dev

大量のデータのハイチャートのパフォーマンスを向上させる

Related 関連記事

  1. 1

    欠落データのハイチャートをデフォルトで0にする方法

  2. 2

    チャートプロパティのイベントロードでchart.renderer.textを使用して、デフォルトのツールチップと同等のカスタムツールチップをマウスオーバーに配置する方法

  3. 3

    チャート上のデータポイントを条件付きでフォーマットする方法

  4. 4

    ハイチャートヒートマップゾーンのpattenObjectsは、色軸によって適用される色を尊重できますか?

  5. 5

    ハイチャートの日付ツールチップをフォーマットしてタイムゾーンを表示する

  6. 6

    Babelウォッチャーを使用してトランスパイルするときに親の「src」ディレクトリを無視する方法

  7. 7

    シート上のハイパーリンクを開き、画像をフォルダごとに保存する方法

  8. 8

    ハイチャート:チャートでデフォルトのエクスポートオプションを取得する方法は?

  9. 9

    htmlハイパーリンク「a」タグのデフォルトのリンク色を削除するにはどうすればよいですか?

  10. 10

    ランチャーのフォント、フォントサイズ、フォントの色を取得することはできますか?

  11. 11

    HTML5ビデオ要素のデフォルトのフルスクリーンボタンを押したときにフルスクリーンイベントをキャプチャするにはどうすればよいですか?

  12. 12

    Spring構成でデフォルトのロケールとタイムゾーンを初期化する

  13. 13

    xaxisデータラベルをバーのハイチャートと同じ色にする

  14. 14

    レコードをMySqlからPostgresに移行するときに、Railsでクエリのデフォルトのタイムゾーンを設定する方法、または日時値のオフセットを設定する方法

  15. 15

    ハイチャートでデータホバーラインの色を変更する

  16. 16

    フォームxamarinでスイッチが「オン」(青から緑)のときにデフォルトの色を変更する方法。iOSのデフォルトではGReenですが、Androidでは青色です

  17. 17

    パラメータを必要とするデフォルトのハンドラーでRedirectToPageを使用するにはどうすればよいですか?

  18. 18

    異なるデフォルトの色とインターフェースを使用するmatplotlib

  19. 19

    ハイチャートバブルグラフを拡大するときにdataLabelsのフォントサイズを変更する

  20. 20

    python-docxは、ドキュメントをインポートするときにフォントの色とスタイルを保持できますか?

  21. 21

    Spring Boot Jackson Dateシリアル化でデフォルトのタイムゾーンを適用する方法

  22. 22

    ハイチャートカスタムボタンホバーし、デフォルトで色の変更を押します

  23. 23

    パンダでデータフレームをループするときにif / elseステートメントを使用する最速の方法

  24. 24

    ハイチャートでドリルダウンするときにタイトルを変更する

  25. 25

    yiiでデフォルトのタイムゾーンを設定する方法は?

  26. 26

    デフォルトの日付と時刻に間違ったタイムゾーンを保存する

  27. 27

    異なるデフォルトのファイルパーミッションを持つコンピューターで送信するときにgitcommitでファイルパーミッションを処理する方法

  28. 28

    DataGridでハイパーリンクのフォントの色を変更する方法

  29. 29

    大量のデータのハイチャートのパフォーマンスを向上させる

ホットタグ

アーカイブ