highcharts在動態插入數據時更改系列顏色

我正在構建一個Web應用程序，用戶需要網頁中的數據並且後端獲取數據並將其傳遞到前端。因此，每次用戶需要新設置數據時，都會在圖表中插入新行。但問題是每條線都是相同的顏色，並且它們彼此重疊使得難以定義。我想每次插入一組新數據時，不同的顏色將由Highcharts自動設置。我試圖在前端收到數據時手動設置顏色，但不起作用。有人可以幫我嗎？非常感謝！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>

來源

2017-08-15 Zachary

我自己解決了這個問題。基本上我每次插入一組新數據時仍然會手動設置系列的顏色。在發佈問題之前，我這樣做了，因爲我沒有在系列中設置顏色屬性，所以失敗了。

我寫了一個函數，它根據索引返回不同的顏色，每次插入一組新數據時我都會調用它。

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; 
    }) 
})

來源

2017-08-15 07:52:43 Zachary

highcharts在動態插入數據時更改系列顏色

回答

相關問題