0
ユーザーがWebページでデータを要求し、バックエンドがデータをフェッチしてフロントエンドに渡すWebアプリケーションを構築しています。したがって、ユーザーが新しいセットのデータを要求するたびに、新しい行がグラフに挿入されます。しかし問題は、すべての線が同じ色であり、互いに重なっていることが定義しにくいことです。私は新しいデータセットが挿入されるたびに、異なる色がHighchartsによって自動的に設定されると思っていました。フロントエンドがデータを受け取ったときに手動で色を設定しようとしましたが、機能しませんでした。誰かが私を助けてくれますか？本当にありがとう！ハイチャートは、データが動的に挿入されたときにシリーズの色を変更します。
script.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>