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

Question

我最近一直在使用 highcharts，最初我使用条形图得到一个成品，但是所有不同的变量都在不同的系列中，所以它有点塞满了。我现在正在尝试将所有东西都放在同一个系列中（只是尝试不同的东西）但是我遇到了一些问题。

根据 y 值，我希望能够更改该点的条形颜色。我过去用这样的方法做过：

  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);

  }

在那种情况下，数据采用不同的格式，因为这些值属于不同的系列。所以我认为对数据的来源进行一些调整会很好，但不行。

我有这个功能，我最初用来自网络服务的数据填充图表，如果你注意到我第一次打印系列的 2 console.debug()s（显示整个系列，所有它的额外数据包括具有我想要访问的 5 个值的 data[] 数组）。但是在下一个 console.debug() 我打印数据只是为了看看我是否可以访问它时它说它是空的？没有意义。

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);
  });
}

我想根据第一段代码设置条形的颜色，但即使只是像我对 //$scope.chart.series[0].data[x].color = '#5cb85c'; 所做的那样尝试设置所有条形图也行不通，因为它说data 数组为空。我对我正在做的事情有 plunker here。只是没有多大意义。您可以在 javascript 控制台中查看正在发生的事情。比如查看图表如何充满它的值，你可以向下滚动到 data 部分，它显示 data: Array[5]，你可以进去看看我正在输入的值。但是下一行你不能访问同一个数组。

Answer 1

您需要做的就是将数据的数组形式替换为对象。这种情况下你可以明确地设置你的颜色

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

这是我对你的 plunker 的更新 http://plnkr.co/edit/UaW6RqM4PsGoy5IdpXDR

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

Change color of different points in same series Highcharts

javascript

jquery

charts

highcharts

angularjs