Highcharts根据值

Question

我正在使用json数据创建列类型图。这是我使用ajax调用获取数据并绘制图表的JS函数。

function getChart(){
    var categorySeries = [];
    var dataSeries = [];            
    var url = "CallToControllerURL";

    $.getJSON(url, function(response) {             
        $.each(response, function(i, item) {
            categorySeries .push(response[i].dateVal);                  
            dataSeries.push(response[i].count);             
        });

        $('#chartDiv').highcharts({
            chart : {type : 'column'},
            title : {text : 'Date vs Count'},
            xAxis : {categories : categorySeries, crosshair : true},
            yAxis : {allowDecimals: false, min : 0, title : { text : 'Count'}},
            plotOptions : { column : {  pointPadding : 0.2, borderWidth : 0,    allowPointSelect: true  } },
            series : [ {name : 'Nbr of Records',data : dataSeries } ]
        });             
    });
}

如果计数大于特定值，我希望能够修改任何一天的条形颜色，比如10。

这是json输入函数的方式。

[{"id":3,"dateVal":"2015-11-12","count":6},{"id":2,"dateVal":"2015-11-11","count":8},{"id":1,"dateVal":"2015-11-10","count":5}]

我有什么建议可以做到这一点吗？

Answer 1

您可以根据列的值使用颜色区域（API）来显示不同的颜色。

值低于/高于值10的示例具有不同的颜色（JSFiddle）：

  int count = 0;

  int[] A = new int[100];
  int[] B = new int[100];      

  //Create the first array
  for (int i = 0; i < A.length; i++) {
     A[i] = (int)(Math.random() * 101);
     System.out.println("Array A: " + A[i]);
  }

  //Create the second array
  for (int i = 0; i < B.length; i++) {
     B[i] = (int)(Math.random() * 101);
     System.out.println("Array B: " + B[i]);
  }

  //Check the indexes and make sure they are all compared-- 10,000 comparisons are made
  for (int i = 0; i < A.length; i++) {    
     for (int j = 0; j < B.length; j++) {
        if(A[i] == B[j])
           count++;
     }
  }

Answer 2

在解析器中，您可以替换：

$.each(response, function(i, item) {
        categorySeries .push(response[i].dateVal);                  
        dataSeries.push(response[i].count);             
    });

与

$.each(response, function(i, item) {
    categorySeries.push(response[i].dateVal);
    if(response[i].count >= 10) {
        dataSeries.push({
        y: response[i].count,
        color: 'red'
      });
    }
    else {
        dataSeries.push(response[i].count);
    }
});

或使用zones。

Answer 3

plotOptions: {
                column: {
                    zones: [
                        {
                            value: -1, 
                            color: 'red', 
                        },
                        {
                            color: 'green'//default color
                        },
                    ],
                },
            }