JavaScript--通过数组迭代来检查条件。

Question

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

我有5个可能的标题结果。"LOW", "MEDIUM-LOW", "MEDIUM", "MEDIUM-HIGH", AND "HIGH"

我现在试图通过我的数组进行迭代 并根据索引的标题分配一种颜色。

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

例如：如果 "MEDIUM-HIGH "是数组中的最后一个标题，那么我的整个图形就会得到以下颜色 #DD5F0C

这是我的代码。

Array:

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 变量来保持颜色。你的代码样本看起来并不完整，所以我将对周围的代码必须如何做一些假设。我建议将你的 series 的数据，所以你可以直接在for-loop中使用它。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
});

Answer 2

不知道我是否正确理解了你想做什么，但可以试试这种方式。

const colorMap = { "LOW":"#0D6302",
"MEDIUM-LOW": "#0B7070",
"MEDIUM": "#DC9603",
"MEDIUM-HIGH": "#DD5F0C",
"HIGH":"#C50710"
}

... 

series: [{
    name: `graphData[0].title`,
    color: colorMap[graphData[0].title],
    data: [graphData[0]],
  }, {

Answer 3

用Highchart的方式 -- 你可以在图表初始化后，通过系列迭代，并通过特定系列设置想要的颜色。

演示一下。https:/jsfiddle.netBlackLabel6hm4ebna

  chart: {
    type: 'bar',
    events: {
      load() {
        let chart = this;

        chart.series.forEach(s => {
          console.log(s)
          if (s.name === 'test1') {
            s.update({
              color: 'red'
            })
          }
         else  if (s.name === 'test3') {
            s.update({
              color: 'green'
            })
          }
        })
      }
    }
  },

API。https:/api.highcharts.comhighchartschart.event.load。

如果这帮不上忙，请用在线编辑器上的样本数据重现你的尝试，我可以在这里工作。