Highcharts - серия цвет на тени - PullRequest
Новая
       7

Highcharts - серия цвет на тени

0 голосов
/ 22 мая 2018

Я хотел бы использовать цвет серии в цвете тени.

Если я жестко закодирую цвета в каждой серии по отдельности, я могу этого добиться, но мне было интересно, есть ли способ сделать это автоматически, без хардкорного цвета в каждой серии?

Закодировать цветиндивидуально: 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]
    }]

});

1 Ответ

0 голосов
/ 22 мая 2018

Один из способов сделать это - использовать функцию загрузки , чтобы установить цвет тени после того, как каждая серия получит свой цвет.Как это: 

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();
    }
  }
},


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],
    }]

});
#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<div id="container"></div>

Рабочий пример: https://jsfiddle.net/jzcwb3vn/4/

...