angular - 如何为同一图表中的不同绘图设置不同的颜色？

Question

我正在做一个项目，我需要在同一个图表中显示两个不同的图。（一个是“SPLINE”另一个是“COLUMN”）我想为每个图设置不同的背景颜色。注意：不是系列的颜色，而是背景颜色

在这里，我想要样条图的颜色不同，导航器和柱形图的颜色也不同

我将添加相关代码

`

chartOptions = {
    chart: {
      styledMode: true,
      marginTop: 51,
      marginRight: 40,
      marginLeft: 20,
      backgroundColor: '#FCFFC5'
    },
    navigator: {
      top: 1,
      series: {
        type: 'spline'
      },
      adaptToUpdatedData: true,
      xAxis: {
        labels: {
          enabled: false,
        }
      }
    },
    rangeSelector: false,
    plotOptions: {
      series: {
        showInNavigator: true,
        gapSize: 0
      }
    },
    xAxis:{
      labels: {
        enabled: true,
      },
      tickColor: 'white',
      events: {
        afterSetExtremes: (e) => {
          var fromDate = e.min;
          var toDate = e.max;
          if(this.timeout){
            clearTimeout(this.timeout);
            this.timeout = 0;
          }
          this.timeout = setTimeout(
            () => {
              console.log("hello");
              this.restService.updateDates({fromDate: moment(fromDate).format("YYYY-MM-DD"), toDate: moment(toDate).format("YYYY-MM-DD")});
            }, 1000
          );
        }
      }
    },
    yAxis: [
      {
        type: 'logarithmic',
          min: 0.1,
          labels: {
            align: 'left',
            x: 5,
            formatter: function () {
              if (this.value === 0.1) {
                return 0;
              } else {
                return Highcharts.Axis.prototype.defaultLabelFormatter.call(this);
              }
            }
          },
        height: '100%',
        offset: 0,
        lineWidth: 2,
      },
      {
        type: 'logarithmic',
          min: 0.1,
          labels: {
            align: 'right',
            x: -5,
            formatter: function () {
              if (this.value === 0.1) {
                return 0;
              } else {
                return Highcharts.Axis.prototype.defaultLabelFormatter.call(this);
              }
            }
          },
        top: '110%',
        height: '30%',
        lineWidth: 2,
        offset:0,
        //labels : { x : 5, align: 'left' }
      },
      {
        opposite: true,
        height: '70%',
        offset: 0,
        lineWidth: 2,
        left:'-100%',
        labels : { x : -5, align: 'left' }
      },
      {
        opposite: true,
        top: '70%',
        height: '30%',
        lineWidth: 2,
        offset:0,
        left:'-100%',
        labels : { x : -5, align: 'left' }
      }
    ],
    series: [
  ],
  tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> Db',
                valueDecimals: 0,
                split: true
              },
  responsive: {
          rules: [{
              condition: {
                  maxWidth: 4500
              },
              chartOptions: {
                  chart: {
                      height: 400
                  },
                  subtitle: {
                      text: null
                  },
                  navigator: {
                      enabled: true
                  }
              }
          }]
      }
  };

`

标签： angulartypescriptchartshighcharts

Answer 1

可以使用yAxis.plotBands每个 yAxis 来实现。请注意，该导航器还具有可以具有 plotBands 的 yAxis。

代码：

var ohlc = [
  [1541514600000, 201.92, 204.72, 201.69, 203.77],
  [1541601000000, 205.97, 210.06, 204.13, 209.95],
  [1541687400000, 209.98, 210.12, 206.75, 208.49],
  [1541773800000, 205.55, 206.01, 202.25, 204.47],
  [1542033000000, 199, 199.85, 193.79, 194.17],
  [1542119400000, 191.63, 197.18, 191.45, 192.23],
  [1542205800000, 193.9, 194.48, 185.93, 186.8],
  [1542292200000, 188.39, 191.97, 186.9, 191.41],
  [1542378600000, 190.5, 194.97, 189.46, 193.53],
  [1542637800000, 190, 190.7, 184.99, 185.86],
  [1542724200000, 178.37, 181.47, 175.51, 176.98],
  [1542810600000, 179.73, 180.27, 176.55, 176.78],
  [1542983400000, 174.94, 176.6, 172.1, 172.29],
  [1543242600000, 174.24, 174.95, 170.26, 174.62],
  [1543329000000, 171.51, 174.77, 170.88, 174.24],
  [1543415400000, 176.73, 181.29, 174.93, 180.94],
  [1543501800000, 182.66, 182.8, 177.7, 179.55],
  [1543588200000, 180.29, 180.33, 177.03, 178.58],
  [1543847400000, 184.46, 184.94, 181.21, 184.82],
  [1543933800000, 180.95, 182.39, 176.27, 176.69],
  [1544106600000, 171.76, 174.78, 170.42, 174.72],
  [1544193000000, 173.49, 174.49, 168.3, 168.49],
  [1544452200000, 165, 170.09, 163.33, 169.6],
  [1544538600000, 171.66, 171.79, 167, 168.63],
  [1544625000000, 170.4, 171.92, 169.02, 169.1],
  [1544711400000, 170.49, 172.57, 169.55, 170.95],
  [1544797800000, 169, 169.08, 165.28, 165.48],
  [1545057000000, 165.45, 168.35, 162.73, 163.94],
  [1545143400000, 165.38, 167.53, 164.39, 166.07],
  [1545229800000, 166, 167.45, 159.09, 160.89]
];

var volume = [
  [1541514600000, 31882900],
  [1541601000000, 33424400],
  [1541687400000, 25362600],
  [1541773800000, 34365800],
  [1542033000000, 51135500],
  [1542119400000, 46882900],
  [1542205800000, 60801000],
  [1542292200000, 46478800],
  [1542378600000, 36928300],
  [1542637800000, 41925300],
  [1542724200000, 67825200],
  [1542810600000, 31124200],
  [1542983400000, 23624000],
  [1543242600000, 44998500],
  [1543329000000, 41387400],
  [1543415400000, 46062500],
  [1543501800000, 41770000],
  [1543588200000, 39531500],
  [1543847400000, 40802500],
  [1543933800000, 41344300],
  [1544106600000, 43098400],
  [1544193000000, 42281600],
  [1544452200000, 62026000],
  [1544538600000, 47281700],
  [1544625000000, 35627700],
  [1544711400000, 31898600],
  [1544797800000, 40703700],
  [1545057000000, 44287900],
  [1545143400000, 33841500],
  [1545229800000, 49047300]
];

Highcharts.stockChart('container', {
  chart: {
    events: {
      load: function() {
        var chart = this;

        chart.yAxis[0].addPlotBand({
          color: 'rgba(255, 0, 0, 0.2)',
          from: chart.yAxis[0].min,
          to: chart.yAxis[0].max
        });

        chart.yAxis[1].addPlotBand({
          color: 'rgba(0, 255, 0, 0.2)',
          from: chart.yAxis[1].min,
          to: chart.yAxis[1].max
        });
        
        chart.navigator.yAxis.addPlotBand({
          color: 'rgba(0, 0, 255, 0.1)',
          from: chart.yAxis[1].min,
          to: chart.yAxis[1].max
        });
      }
    }
  },
  navigator: {
  	maskFill: 'rgba(0, 0, 0, 0.15)'
  },
  title: {
    text: 'AAPL Historical'
  },
  yAxis: [{
    labels: {
      align: 'right',
      x: -3
    },
    title: {
      text: 'OHLC'
    },
    height: '60%',
    lineWidth: 2,
    resize: {
      enabled: true
    }
  }, {
    labels: {
      align: 'right',
      x: -3
    },
    title: {
      text: 'Volume'
    },
    top: '65%',
    height: '35%',
    offset: 0,
    lineWidth: 2
  }],
  tooltip: {
    split: true
  },
  series: [{
    type: 'spline',
    name: 'AAPL',
    data: ohlc
  }, {
    type: 'column',
    name: 'Volume',
    data: volume,
    yAxis: 1
  }]
});

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<div id="container"></div>

演示：

• https://jsfiddle.net/BlackLabel/0paxh7j2/1/

API参考：

• https://api.highcharts.com/highstock/yAxis.plotBands

• https://api.highcharts.com/class-reference/Highcharts.Axis#addPlotBand