Javascript Highcharts:如何使多个系列的列具有特定的颜色
很抱歉,下面是对这个问题的更好描述。首先,我使用的是asp.net/vb.net,我试图得到一个图表来处理每个类别有2个系列的Highcharts。我正在检查列的值,并希望根据存在的值设置列的颜色 ASPXJavascript Highcharts:如何使多个系列的列具有特定的颜色,javascript,asp.net,vb.net,highcharts,Javascript,Asp.net,Vb.net,Highcharts,很抱歉,下面是对这个问题的更好描述。首先,我使用的是asp.net/vb.net,我试图得到一个图表来处理每个类别有2个系列的Highcharts。我正在检查列的值,并希望根据存在的值设置列的颜色 ASPX <script type="text/javascript"> $(document).ready(function () { $(function () { $('#summary_chart').highcharts({ char
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('#summary_chart').highcharts({
chart: {
type: 'column'
},
title: {
text: ' ',
align: 'left'
},
xAxis: {
categories: [<%= UserString %>]
},
yAxis: {
min: 0,
max: 9,
title: {
text: 'Grade'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
colors: [<%= ColorString %>],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
colorByPoint: true
}
},
series: [{
name: 'Grade1',
data: [<%= Grade1String %>]
}, {
name: 'Grade2',
data: [<%= Grade2String %>]
}]
});
});
});
请参阅此JSFIDLE并查看系列数据。我已经为每个系列指定了颜色属性,从而改变了列的颜色
series: [{
name: 'Tokyo',
color: '#0000FF',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
color:'#659CEF',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
color:'#FFC0CB',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
color:'#FFA500',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
希望这是你想要的
我还试图修改你的代码。你可以在这里看到它(我删除了colorByPoint:true),它成功了 事实证明,您可以将自己的数据数组作为对象,而不仅仅是数据的数字。以下是highcharts“系列”部分的示例部分,每个数据点都有不同的颜色[希望您可以使用此颜色]
series: [{
name: 'Population',
data: [{
color: '#FF9999',
y: 34.4
},{
color: '#339900',
y: 21.8
},{
color: '#6600FF',
y: 20.1
}],
},
{
name: 'Population',
data: [{
color: '#FF0033',
y: 34.4
},{
color: '#99CC66',
y: 21.8
},{
color: '#3366CC',
y: 20.1
}]
您可能可以直接指定“x”值,但当我尝试时,Highcharts足够聪明,可以将每个值与类别列表匹配。我不确定这是否有效,但请尝试在序列中指定颜色:“#您的颜色代码”。当您说要设置“每列颜色,而不是每类别颜色”时你的意思是,你希望每个系列都有不同的颜色,还是希望每一列都有不同的颜色?@中毒钢琴家,我希望每一列都可能有不同的颜色。我正在根据列的值设置颜色。我现在重写我的问题,因为它写得很糟糕,对不起;/请参考此链接。
series: [{
name: 'Population',
data: [{
color: '#FF9999',
y: 34.4
},{
color: '#339900',
y: 21.8
},{
color: '#6600FF',
y: 20.1
}],
},
{
name: 'Population',
data: [{
color: '#FF0033',
y: 34.4
},{
color: '#99CC66',
y: 21.8
},{
color: '#3366CC',
y: 20.1
}]