JavaScript - 迭代数组以检查条件

Question

我正在创建一个 Highcharts 图表，我想根据对象的标题动态地赋予图表颜色。我目前有一个数组graphData，它有一个对象title。

我有 5 种可能的标题结果:“低”、“中低”、“中”、“中高”和“高”

我现在尝试迭代我的数组并根据索引的标题分配颜色。

我的整个图表根据数组的最后一个标题接收一种颜色。我希望颜色分别影响数组的每个索引。

例如:如果“MEDIUM-HIGH”是数组中的最后一个标题，则我的整个图表将变为 #DD5F0C

这是我的代码:

数组:

graphData: [      […]
​
0: Object { title: "LOW", result: 62582 }
​
1: Object { title: "MEDIUM-LOW", result: 57758 }
​
2: Object { title: "LOW", result: 8795 }
​
3: Object { title: "HIGH", result: 262525 }
​
4: Object { title: "MEDIUM-HIGH", result: 167168 }  ]

<小时/>

  let graphColor = ""


        for (i = 0; i < graphData.length; i++) {
            if (graphData[i].title === "LOW") {
                graphColor = "#0D6302"
            } else if (graphData[i].title === "MEDIUM-LOW") {
                graphColor = "#0B7070"
            } else if (graphData[i].title === "MEDIUM") {
                graphColor = "#DC9603"
            } else if (graphData[i].title === "MEDIUM-HIGH") {
                graphColor = "#DD5F0C"
            } else if (graphData[i].title === "HIGH") {
                graphColor = "#C50710"
            }

        }

<小时/>

HighCharts 代码:

Highcharts.chart('container', {
      chart: {
        type: 'bar'
      },
      title: {
        text: "Bar Graph"
      },
      xAxis: {

      },
      yAxis: {
        min: 0,
        formatter: function() {
          return this.value + "%";
        },
        title: {
          text: '% of Total'
        }
      },
      legend: {
        reversed: false
      },
      plotOptions: {
        series: {
          stacking: 'normal'
        }
      },
      series: [{
        name: `graphData[0].title`,
        color: graphColor,
        data: [graphData[0]],
      }, {
        name: 'graphData[1].title',
        color: graphColor,
        data: [graphData[1]],
        showInLegend: false,
        linkedTo: ":previous"
      }, {
        name: 'graphData[2].title,
        color: graphData[0].title,
        data: [graphData[2]]
      }, {
        name: graphData[3].title,
        color: '#DC9603',
        data: [graphData[3]]
      }, {
        name: graphData[4].title,
        color: graphColor,
        data: [graphData[4]]
      }, {
        name: graphData[5].title,
        color: graphColor,
        data: [graphData[5]]
      }]
    });

我期望我的“颜色”根据该特定索引的 graphData.title 动态生成。

Answer 1

您遇到了麻烦，因为您有 graphData.length 个条目，但只有一个 graphColor 变量来保存颜色。您的代码示例看起来并不完整，因此我将对周围的代码必须如何进行一些假设。我建议直接在 for 循环中构建 series 数据，以便您可以在 Highcharts.chart 调用中使用它。这样代码更容易阅读，如果您需要更多数据行，代码也可能更灵活。

// build the series data array here so it's simple to use in the chart call
const series = new Array(graphData.length);
for (let i = 0; i < graphData.length; i++) {
  let graphColor = "#000000";  // a default color just in case
  // can use if/else or a switch here
  if (graphData[i].title === "LOW") {
    graphColor = "#0D6302";
  } else if (graphData[i].title === "MEDIUM-LOW") {
    graphColor = "#0B7070";
  } else if (graphData[i].title === "MEDIUM") {
    graphColor = "#DC9603";
  } else if (graphData[i].title === "MEDIUM-HIGH") {
    graphColor = "#DD5F0C";
  } else if (graphData[i].title === "HIGH") {
    graphColor = "#C50710";
  } 

  series[i] = { 
    name: graphData[i].title,
    color: graphColor,
    data: [graphData[i].result]
  };
}

// Adjust the series data as needed
series[1].showInLegend = false;
series[1].linkedTo = ":previous";

Highcharts.chart("container", {
  chart: { type: "bar" },
  title: { text: "Bar Graph" },
  xAxis: {},
  yAxis: {
    min: 0,
    formatter: function() {
      return this.value + "%";
    },
    title: { text: "% of Total" }
  },
  legend: { reversed: false },
  plotOptions: { series: { stacking: "normal" } },
  series: series
});