javascript - highcharts change series color when data is dynamically inserted -
i'm building web app in users required data in web page , end fetch data , pass front end. each time user require new set data, new line inserted chart. problem every line in same color , overlapped each other makes hard define. thought each time when new set of data inserted different color set automatically highcharts. tried manually set color when front end received data, didn't work. please me? much!
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 default data when web page 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 required data 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>
i solved problem myself. still manually set series's color each time when new set of data inserted. did before post question , failed because didn't set color attribute within series.
i wrote function returns different color according index , call each time new set of data inserted.
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 default data when web page 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 required data 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 search history $('#clear').click(() => { options.series = [{ name: '', data: [] }] var chart = new highcharts.chart(options); colorcnt = 0; }) })
Comments
Post a Comment