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

时间:2015-05-28 19:12:45

标签: javascript jquery angularjs charts highcharts

我最近一直在使用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()我首先打印出的系列(显示整个系列的所有额外的系列)数据包括具有我想要访问的5个值的data[]数组。但是在下一个console.debug()我打印数据只是为了看看我是否可以访问它,它说它为null?毫无意义。

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';一样,它也不起作用,因为它表示{{ 1}}数组为空。我有plunker here与我正在做的事情。只是没有多大意义。您可以在javascript控制台中查看正在进行的操作。比如查看图表中的值是多少,您可以向下滚动到data部分并显示data,然后您可以进入并查看我正在提供的值。但是下一行你无法访问同一个数组。

1 个答案:

答案 0 :(得分:1)

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

<div data-bind="textinlineeditor: name, editorsavehandler: saveName"></div>

以下是我对您的plunker http://plnkr.co/edit/UaW6RqM4PsGoy5IdpXDR

的更新