我正在构建一个网络应用程序，其中用户需要网页中的数据，后端获取数据并将其传递给前端。所以每次用户需要一个新的数据集时，新的行就会被插入到图表中。但问题是每条线都是相同的颜色并且它们相互重叠使得很难定义。我认为每次插入一组新数据时，Highcharts 都会自动设置不同的颜色。我尝试在前端收到数据时手动设置颜色，但是没有用。有人可以帮我吗？非常感谢!
脚本.js:
$(document).ready(function() {
var colorCnt = 0;
var options = {
chart: {
renderTo: containerSpline,
type: 'spline',
},
title: {
text: '信息录入统计曲线图'
},
credits: {
enabled: false
},
xAxis: {
title: {
text: '时间'
},
categories: []
},
yAxis: {
title: {
text: '数量'
}
},
series: []
};
$.get("//localhost:5050", (data)=>{
// feed the default data when the web page is firstly loaded
var series = {
name:'',
data: []
};
var xAxis = {
categories: []
};
data.recordset.forEach((item)=>{
series.data.push(item.Count);
series.name = item.Dates;
options.xAxis.categories.push(item.Times);
})
options.series.push(series);
var chart = new Highcharts.Chart(options);
})
$('button').click(()=>{
// feed the required data by the user
var obj = {
year: $('#year').val(),
month: $('#month').val(),
day: $('#day').val()
}
$.post('//localhost:5050',obj, (data)=>{
options.chart.colorCount = options.chart.colorCount+1;
var series = {
name:'',
data: []
};
var xAxis = {
categories: []
};
console.log(data.recordsets);
data.recordset.forEach((item)=>{
series.data.push(item.Count);
series.name = item.Dates;
options.xAxis.categories.push(item.Times);
})
options.series.push(series);
var chart = new Highcharts.Chart(options);
})
});
})
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>信息录入统计</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="pageheader">
<h1>信息录入统计</h1>
</div>
<div class="jumbotron">
<div id="container">
<div class="input-group">
<input type="text" class="form-control" placeholder="查询年份" aria-describedby="basic-addon2" id="year">
<span class="input-group-addon" id="basic-addon2">年</span>
<input type="text" class="form-control" placeholder="查询月份" aria-describedby="basic-addon2" id="month">
<span class="input-group-addon" id="basic-addon2">月</span>
<input type="text" class="form-control" placeholder="查询日期" aria-describedby="basic-addon2" id="day">
<span class="input-group-addon" id="basic-addon2">日</span>
<span class="input-group-btn">
<button class="btn btn-default" type="button">查询</button>
</span>
</div>
<div class="chart", id="containerSpline"></div>
</div>
</div>
<!-- <div id="containerSpline"></div> -->
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src='highcharts.js'></script>
<script src="highcharts-more.js"></script>
<!-- <script src="data.js"></script> -->
<script src='script.js'></script>
</body>
</html>
最佳答案
我自己解决了这个问题。基本上每次插入一组新数据时我仍然手动设置系列的颜色。我在发布问题之前这样做但失败了，因为我没有在系列中设置颜色属性。
我编写了一个根据索引返回不同颜色的函数，每次插入一组新数据时我都会调用它。
var switchColor = (cnt) => {
var colors = ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'];
return colors[cnt];
}
$(document).ready(function() {
var colorCnt = 1;
var options = {
chart: {
renderTo: containerSpline,
type: 'spline',
},
title: {
text: '信息录入统计曲线图'
},
credits: {
enabled: false
},
xAxis: {
title: {
text: '时间'
},
categories: []
},
yAxis: {
title: {
text: '数量'
}
},
series: [{
name:'',
data:[]
},
]
};
// show the default data when the web page is firstly loaded
$.get("//localhost:5050", (data)=>{
var series = {
name:'',
data: []
};
var xAxis = {
categories: []
};
data.recordset.forEach((item)=>{
series.data.push(item.Count);
series.name = item.Dates;
options.xAxis.categories.push(item.Times);
})
options.series[0].data = series.data;
options.series[0].name = series.name;
var chart = new Highcharts.Chart(options);
})
// feed the required data into the chart
$('#query').click(()=>{
var obj = {
year: $('#year').val(),
month: $('#month').val(),
day: $('#day').val()
}
$.post('//localhost:5050',obj, (data)=>{
options.chart.colorCount++;
var series = {
name:'',
data: [],
color: switchColor(colorCnt++),
};
var xAxis = {
categories: []
};
console.log(data.recordsets);
data.recordset.forEach((item)=>{
series.data.push(item.Count);
series.name = item.Dates;
options.xAxis.categories.push(item.Times);
})
options.series.push(series);
var chart = new Highcharts.Chart(options);
})
});
// clear the search history
$('#clear').click(() => {
options.series = [{
name: '',
data: []
}]
var chart = new Highcharts.Chart(options);
colorCnt = 0;
})
})
关于javascript - 动态插入数据时，highcharts 会更改系列颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45686240/