Question

我想在阴影颜色中使用系列颜色。

如果我单独对每个系列中的颜色进行硬编码，我可以实现这一目标，但我想知道有一种方法可以自动完成，而且每个系列都没有硬核颜色吗？

单独对颜色进行硬编码：https://jsfiddle.net/jzcwb3vn/

Highcharts.theme = {
    colors: ['#3498db', '#e74c3c'], 
    plotOptions: {
        line: {
            lineWidth: 3,
            marker: {
                enabled: false
            }
        }
    }
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);

Highcharts.chart('container', {
  series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        shadow: {
          width: 8,
          opacity: 0.2,
          color: '#3498db'
        }
    }, {
        data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
        shadow: {
          width: 8,
          opacity: 0.2,
          color: '#e74c3c'
        }
    }]

});

没有硬编码颜色：https://jsfiddle.net/jzcwb3vn/2/

Highcharts.theme = {
    colors: ['#3498db', '#e74c3c'], 
    plotOptions: {
        line: {
            lineWidth: 3,
            shadow: {
                width: 8,
              opacity: 0.2
            },
            marker: {
                enabled: false
            }
        }
    }
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);

Highcharts.chart('container', {
  series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
    }]

});

Answer 1

这样做的一种方法是使用load function设置阴影的颜色，在每个系列获得它的颜色后。像这样：

chart: {
  events: {
    load: function() {
      let allSeries = this.series;
      for(var i = 0; i < allSeries.length; i++) {
        allSeries[i].update({shadow: {color: allSeries[i].color}}, false);
      }
      this.redraw();
    }
  }
},

＆＃13;

Highcharts.theme = {
    colors: ['#3498db', '#e74c3c'], 
    plotOptions: {
        line: {
            lineWidth: 3,
            marker: {
                enabled: false
            },
            shadow: {
          width: 8,
          opacity: 0.2,
        }
        }
    }
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);

Highcharts.chart('container', {
	chart: {
  	events: {
    	load: function() {
        let allSeries = this.series;
        for(var i = 0; i < allSeries.length; i++) {
        	allSeries[i].update({shadow: {color: allSeries[i].color}}, false);
        }
        this.redraw();
      }
    }
  },
  series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        
    }, {
        data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5],
    }]

});

＆＃13;

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

＆＃13;

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<div id="container"></div>

＆＃13;

工作示例： https://jsfiddle.net/jzcwb3vn/4/

Highcharts - 阴影上的系列颜色

1 个答案: