更改同一系列Highcharts中不同点的颜色

Question

I have recently been working with highcharts alot, and originally I got a finished product using a bar chart, but all of the different variables were in different series so it was kinda crammed. I am now trying to put stuff all in the same series (just trying different things) but am having some issues.

Depending on the y-value I want to be able to change the color of the bar for that point. I have done it in the past with something like this:

  for (x = 0; x < 5; x++) {
    var color = '';
    if ($scope.jsondata[x].data[0] > 75) {
      $scope.jsondata[x].color = '#d9534f';
    } else if ($scope.jsondata[x].data[0] > 50) {
      $scope.jsondata[x].color = '#f0ad4e';
    } else {
      $scope.jsondata[x].color = '#5cb85c';
    }

    $scope.jsondata[x].name = setName($scope.jsondata[x].name);

  }

The data was in a different format in that case since the values were in different series. So I figured a few tweaks to where the data is coming from would be good, but no.

I have this function where I am initially filling up the charts with data from a webservice and if you note the 2 console.debug() s where I first print out the series (which displays the entire series with all of its extra data including the data[] array that has the 5 values I want to access). But on the next console.debug() where I print the data just to see if I can access it it says its null? Makes no sense.

function initializeData() {
  $http.get(url).success(function(ret) {
    $scope.jsondata = ret;
    console.debug("here");
    var newdata = [];
    console.debug($scope.chart.series[0]);
    console.debug($scope.chart.series[0].data[0]);
    for (x = 0; x < 5; x++) {
      //$scope.chart.series[0].data[x].color = '#5cb85c';
      newdata.push([$scope.jsondata[x].name, $scope.jsondata[x].data]);
    }

    $scope.chart.series[0].setData(newdata);
  });
}

I want to set the colors of the bars in accordance to that first chunk of code, but even just trying to set them all like I did with //$scope.chart.series[0].data[x].color = '#5cb85c'; it won't work, because it says the data array is empty. I have a plunker here with what I am doing. Just doesnt make much sense. You can view what is going on in the javascript console. Like check out how the chart is full of its values, and you can scroll down to the data portion and it says data: Array[5] and you can go in there and see the values I am feeding it. But the next line you can't access that same array.

Answer 1

All you need to do is to replace array form of your data to object. This case you can set your color explicitly

for (x = 0; x < 5; x++) {
  var item = $scope.jsondata[x];
  newdata.push({name:setName(item.name), y:item.data, color: getColor(item.data)});
}

Here's my update to your plunker http://plnkr.co/edit/UaW6RqM4PsGoy5IdpXDR