JavaScript - перебор массива для проверки условия - PullRequest
Новая
       3

JavaScript - перебор массива для проверки условия

0 голосов
/ 08 мая 2020

Я создаю график высоких диаграмм, которому я хотел бы динамически присвоить цвет графика в зависимости от названия объекта. В настоящее время у меня есть массив graphData с объектом title.

У меня есть 5 возможных результатов заголовков: "LOW", "MEDIUM-LOW", "MEDIUM", "MEDIUM-HIGH", AND "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 равно для указанного c индекса.

Ответы [ 3 ]

1 голос
/ 08 мая 2020

У вас проблемы, потому что у вас есть graphData.length количество записей, но только одна graphColor переменная для хранения цвета. Ваши образцы кода не выглядят законченными, поэтому я сделаю несколько предположений о том, каким должен быть окружающий код. Я рекомендую создавать ваши series данные непосредственно в for-l oop, чтобы вы могли просто использовать их в вызове 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
});
1 голос
/ 08 мая 2020

В режиме Highchart - вы можете перебирать серии после инициализации диаграммы и устанавливать желаемые цвета для конкретной серии.

Демо: https://jsfiddle.net/BlackLabel/6hm4ebna/

  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.com/highcharts/chart.events.load

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

1 голос
/ 08 мая 2020

Не уверен, правильно ли я понял, что вы пытаетесь сделать, но попробуйте вот так: 

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