提问者:小点点

如何为第一个标签反转颜色顺序?


我有一个水平堆叠的酒吧与3个标签与相同的顺序的颜色。我想知道我如何才能逆转第一个标签的颜色顺序,使它从深蓝色到暗红色,并为标签2和3保持相同的颜色流。

https://jsfidle.net/samwhite/s9yzuqd5/

var colors = ['#93003a', '#f4777f', '#ffb040', '#a5d5d8', '#00429d'];
var def_color = '#d3d3d3';

    let labels = [
      "In my organization, more emphasis is placed on quantity of work than on the quality of work",
      "My Division/Office/Region is making real, meaningful progress on diversity, inclusion, and opportunity in our workplace",
      "In my Division/Office/Region, I am given a fair opportunity to work on visible, career-enhancing assignments"
    ];

    // Construct the chart
    let chart = Highcharts.chart('container1_1', {
      ...
      yAxis: {
        title: { text: 'Response Rate' },
        max: 100,
        maxPadding: 0,
        labels: {
          format: '{value}%'
        },
        gridLineWidth: 0,
        minorGridLineWidth: 0
      },
      ...
      xAxis: {
        categories: labels,
        labels: {
          style: {
            fontSize: '1em',
            color: '#000',
            width: 370,
            float: 'left'
          }
        }
      },
      series: [{
        name: 'Strongly Agree',
        color: colors[4],
        data: []
      }, {
        name: 'Agree',
        color: colors[3],
        data: []
      }, {
        name: 'Neither Agree nor Disagree',
        color: colors[2],
        data: []
      }, {
        name: 'Disagree',
        color: colors[1],
        data: []
      }, {
        name: 'Strongly Disagree',
        color: colors[0],
        data: []
      }]
    });

共1个答案

匿名用户

有两件事可以让它工作。

  • 将参数color更改为colors并根据位置设置颜色数组。默认情况下,它采用第一种颜色
  • 添加colorbypoint
  • 选项

https://jsfidle.net/jouwsln0/


 series: [{
        name: 'Strongly Agree',
        colorByPoint: true,
        colors: [colors[4], colors[0]],
        data: []
      }, {
        name: 'Agree',
        color: colors[3],
        data: []
      }, {
        name: 'Neither Agree nor Disagree',
        color: colors[2],
        data: []
      }, {
        name: 'Disagree',
        color: colors[1],
        data: []
      }, {
        name: 'Strongly Disagree',
         colorByPoint: true,
        colors:  [ colors[0],colors[4]],
        data: []
      }]