更改Highcharts列的顏色爲不同的派對

Question

我有這個列圖表啓動和運行here，我想改變列的顏色爲紅色，如果黨是共和黨和藍色，如果黨是民主黨。我想我可以使用第三方和未知或未指定的默認顏色。不確定使用Highcharts設置完成此操作的最佳方式。

這是迄今爲止代碼：

  $(document).ready(function() { 
var options = { 
// basic chart options 
chart: { 

    renderTo: 'container', 
    type: 'column', 
    marginRight: 130, 
    // lang: { 
    // thousandsSep: ',' 
    //}, 
    marginBottom: 50, 
    style: { 
    fontFamily: 'Source Sans Pro, arial, helvetica, sans-serif' 
    }, 
    // 3D initialization, comment out for non-3D columns 
    options3d: { 
    // sets all params for 3D angles 
    enabled: true, 
    alpha: 0, 
    beta: 0, 
    depth: 25, 
    viewDistance: 10 
    } 
}, 
// main chart title (TOP) 
title: { 
    text: 'Giving Trends', 
    style: { 
    fontWeight: 'bold' 
    }, 
    x: -20 //center 
}, 
// main chart sub-title (TOP) 
subtitle: { 
    text: 'By Party of Filer', 
    style: { 
    fontWeight: 'bold' 
    }, 
    x: -20 
}, 
// xAxis title 
xAxis: { 
    lineWidth: 0, 
    minorGridLineWidth: 0, 
    gridLineWidth: 0, 
    lineColor: 'transparent', 

    labels: { 

    formatter: function() { 
     // custom formatter 

     if (this.value == 0) { 
     return '(Not Designated)'; 

     } else { 

     return this.value; 
     } 
    }, 

    enabled: false, 
    style: { 
     color: '#000', 
     fontWeight: 'bold', 
     fontSize: '12px', 
     overflow: 'auto' 
    } 

    }, 
    minorTickLength: 0, 
    tickLength: 0, 
    reversed: false, 
    title: { 
    text: '', 
    style: { 

     color: '#000000' 
    }, 
    }, 
    categories: [] 
}, 
// yAxis title 
yAxis: { 
    labels: { 
    format: '$ {value}', 
    formatter: function() { 
     return '$' + Highcharts.numberFormat(this.value, 0, '', ','); 
    }, 
    style: { 
     fontWeight: 'bold', 
     color: '#000000' 
    } 
    }, 
    lang: { 
    thousandsSep: ',' 
    }, 
    title: { 
    text: '', 
    style: { 
     fontWeight: 'bold', 
     color: '#000000', 

    } 
    }, 
    // chart options for each plotted point 
    plotLines: [{ 
    value: 0, 
    width: 0 

    }] 
}, 
// tooltip on hover options 
tooltip: { 
    // lang: { 
    // thousandsSep: ',' 
    // }, 
    useHTML: true, 
    style: { 
    fontWeight: 'bold', 

    }, 

    formatter: function() { 
    // custom formatter for followthemoney.org, formats the tooltip to show nulls as not designated 
    if (this.x == null) { 
     return this.series.name + '<br/><hr>' + '(Not Designated)' + ': $' + Highcharts.numberFormat(this.y, 0) 
    } else if (this.x == '') { 
     return '(Not Designated)' + '<br/><hr/>' + '$' + Highcharts.numberFormat(this.y, 0); 
    } else { 
     return this.series.name + '<hr/>' + this.x + ': $' + Highcharts.numberFormat(this.y, 0); 
    } 

    } 
}, 
legend: { 
    layout: 'horizontal', 
    align: 'left', 
    verticalAlign: 'top', 
    x: 0, 
    y: 0, 
    borderWidth: 0, 
}, 
plotOptions: { 

    allowDecimals: { 
    enabled: false 
    }, 
    series: { 
    text: 'Total Dollar Amount', 
    color: 'rgba(52,152,219, 0.9)', 
    fontWeight: 'bold', 
    cursor: 'pointer', 
    connectNulls: true, 
    pointWidth: 100 
    }, 
    column: { 
    stacking: 'normal', 
    dataLabels: { 
     enabled: true, 
     y: -50, 
     align: 'center', 
     verticalAlign: 'top', 
     borderRadius: 5, 
     backgroundColor: 'rgba(252, 255, 197, 0.7)', 
     borderWidth: 1, 

     borderColor: '#AAA', 

     // format the xAxis labels to handle null and blank values from database 
     formatter: function() { 
     if (this.x == null) { 
      return '(Not Designated)' + '<br/><hr/>' + '$' + Highcharts.numberFormat(this.y, 0); 
     } else if (this.x == '') { 
      return '(Not Designated)' + '<br/><hr/>' + '$' + Highcharts.numberFormat(this.y, 0); 
     } 
     return this.x + '<br/><hr/>' + '$' + Highcharts.numberFormat(this.y, 0); 
     } 

    } 
    } 
}, 
series: [] 

} 

Highcharts.setOptions({ 
// sets comma for thousands separator - globally* 
lang: { 
    thousandsSep: ',' 
}, 
tooltip: { 
    xDecimals: -2 // If you want to add 2 decimals 
}, 

}); 

$.getJSON("/charts/data/contributor-data.php?<?php echo $_SERVER['QUERY_STRING']; ?>", function(json) { 
options.xAxis.categories = json[0]['data']; 
options.series[0] = json[1]; 
chart = new Highcharts.Chart(options); 
chart.legend.allItems[0].update({ 
    name: 'Giving Trends by Party' 
}); ///// LEGEND MAIN LABEL CHANGES HERE! 


    }); 
}); 

Answer 1

有幾種方法可以做到這 你可以通過所有類別，並按照類別名稱改變顏色。再次檢查該link

var chart = $('#container').highcharts(); 
    $.each(chart.series[0].data, function(i,point){ 
     if(point.category == 'Mar') 
      point.update({ 
       color:'#FF0000' 
      }); 
    }); 

你也可以檢查一些有用的建議here