我正在使用 HighCharts 绘制折线图,并尝试更改每个系列的线条颜色。我确实找到了这个例子here https://stackoverflow.com/questions/5727419/highcharts-is-it-possible-to-customize-the-colors-of-individual-series但数据是硬编码的。我的数据是从 Sql 数据库中提取的,并使用一些 VB 代码传递到 HTML 页面。
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Chart Title'
},
subtitle: {
text: 'Chart subtitle'
},
xAxis: {
categories: [<%= GraphDate %>]
,
labels:
{
rotation: -45,
align: 'right',
style:
{
}
}
},
yAxis: {
min: 160,
title: {
text: 'Temp'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 400,
y: 0,
floating: true,
shadow: true
},
tooltip: {
formatter: function () {
return '' +
this.x + ': ' + this.y + ' ºC';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series:
[<%= GraphSeries %>],
});
我尝试使用另一篇文章对其进行样式设置,但未能生成图表。主要问题是,折线图有两个系列,所以下面的方法将为我假设的两个系列设置颜色?那么,我是否需要以某种方式在我的 vb 代码中格式化该系列?
series: [{
color: 'yellow',
data: [
[<%= GraphSeries %>]
]},
Edit:
$(document).ready(function () {
chart = new Highcharts.Chart({
colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92']
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
}