我已经启动了这个柱形图并运行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!
});
});