时间戳

首页 > 解决方案 > Highstock，yAxis周围的边框或每个yAxis的不同背景颜色？

highcharts - Highstock，yAxis周围的边框或每个yAxis的不同背景颜色？

问题描述

我正在使用 Highstock 来可视化股票数据。图表可以包含多个 yAxis。是否可以为每个 yAxis 设置单独的背景颜色或在每个 yAxis 周围创建边框以使图表更易于阅读？

在下面的 JSFiddle 中，我想用边框或颜色分隔价格和数量。我可以使用 CSS 来更改整个图表的颜色，但不能单独更改每个 yAxis。可能吗？

@import 'https://code.highcharts.com/css/highcharts.css';

.highcharts-background {
    fill: #efefef;
    stroke: #a4edba;
    stroke-width: 2px;
}

.highcharts-plot-background {
    fill: #efffff;
}
.highcharts-plot-border {
    stroke-width: 2px;
    stroke: #00b5ec;
}

JSFiddle：https ://jsfiddle.net/jwr1sz3L/1/

我知道可以有多个同步的图表，并且具有不同的背景，但是你可以对 yAxis 做同样的事情吗？

JSFiddle：https ://jsfiddle.net/gf3u6y2r/

标签： highchartscolors

解决方案

是的，这是可能的。要获得 yAxis 的单独背景颜色，请使用yAxis.plotBands API。下面是代码片段。

Highcharts.getJSON('https://www.highcharts.com/samples/data/aapl-ohlcv.json', function(data) {

  // split the data set into ohlc and volume
  var ohlc = [],
    volume = [],
    dataLength = data.length,
    // set the allowed units for data grouping
    groupingUnits = [
      [
        'week', // unit name
        [1] // allowed multiples
      ],
      [
        'month',
        [1, 2, 3, 4, 6]
      ]
    ],

    i = 0;

  var minValue = 0,
    maxValue = 0,
    high,
    low;

  for (i; i < dataLength; i += 1) {
    ohlc.push([
      data[i][0], // the date
      data[i][1], // open
      data[i][2], // high
      data[i][3], // low
      data[i][4] // close
    ]);

    high = data[i][2];
    low = data[i][3];
    minValue = minValue == 0 ? low : minValue
    //measuring high and low values of OHLC data!
    if (high > maxValue) {
      maxValue = high;
    }
    if (low < minValue) {
      minValue = low;
    }

    volume.push([
      data[i][0], // the date
      data[i][5] // the volume
    ]);
  }


  // create the chart
  Highcharts.stockChart('container', {

    rangeSelector: {
      selected: 1
    },

    title: {
      text: 'AAPL Historical'
    },

    yAxis: [{
      plotBands: [{
        from: minValue,
        to: maxValue,
        color: '#5cdbdb',
        label: {
          text: 'separate color for the price and volume'
        }
      }],
      labels: {
        align: 'right',
        x: -3
      },
      title: {
        text: 'OHLC'
      },
      height: '60%',
      lineWidth: 2,
    }, {
      labels: {
        align: 'right',
        x: -3
      },
      title: {
        text: 'Volume'
      },
      top: '65%',
      height: '35%',
      offset: 2,
      lineWidth: 2
    }],

    tooltip: {
      split: true
    },

    series: [{
      type: 'candlestick',
      name: 'AAPL',
      data: ohlc,
      dataGrouping: {
        units: groupingUnits
      }
    }, {
      type: 'column',
      name: 'Volume',
      data: volume,
      yAxis: 1,
      dataGrouping: {
        units: groupingUnits
      }
    }]
  });
});
.highcharts-plot-border {
	stroke-width: 2px;
	stroke: #00b5ec;
}
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px"></div>

您还可以在绘图带上设置from和to以扩展 yAxis 的颜色。在此示例中，使用数据的高/低值来设置颜色。您可以设置自己的值。

JSFiddle：https ://jsfiddle.net/AbdulWahab/n2rq6pf7/

推荐阅读