如何反转第一个标签的颜色顺序？

Question

我有一个带有 3 个颜色顺序相同的标签的水平堆叠条。我想知道如何仅反转第一个标签的颜色顺序，使其从 深蓝色变为深红色 并使标签 2 和 3 保持相同的颜色流动。

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: []
      }]
    });

Answer 1

在每个数据集上添加颜色以根据索引在所需的配色方案中工作

您可以在此处查看参考资料：https://api.highcharts.com/highcharts/series.bar.data

 {
                                            name: tooltip_titles[s],
                                            color: colors[Math.abs(s - 4)],
                                                        y: dept_data["102"][4-s]
                                            },

旧 - https://jsfiddle.net/jouwsLn0/

新 - https://jsfiddle.net/js1bfxe5/1/


 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: []
      }]
    });

    $("#filterOrganization").change(function () {
      $(this).find("option:selected")
        .each(function () {
          var optionValue = $(this).text();
          let dept_data = data[optionValue];
          chart.series.forEach((series, s) => {
          console.log(s);
          console.log(dept_data["102"][4-s]);
            series.setData([
            
                                        {
                                            name: tooltip_titles[s],
                                            color: colors[Math.abs(s - 4)],
                                                        y: dept_data["102"][4-s]
                                            },
                          {
                                            name: tooltip_titles[s],
                                            color: colors[s],
                                                        y: dept_data["104"][4-s]
                                            },
                          {
                                            name: tooltip_titles[s],
                                            color: colors[s],
                                                        y: dept_data["105"][4-s]
                                            }]);
          });
        });
    }).change();

如何反转第一个标签的颜色顺序？

How to reverse colors order for the first label?

javascript

jquery

highcharts