需要帮助使用SharePoint列表和PSServices将其他系列添加到Highcharts图中

Need assistance adding an additional series to a Highcharts graph using a SharePoint list and PSServices

本文关键字：其他系列 添加 图中 Highcharts PSServices 帮助 列表 SharePoint      更新时间：2023-09-26

我有一个SharePoint列表，其中包含日期列、RedTeamScore列和BlueTeamScore栏（请参阅屏幕截图）

我的Highcharts图表目前由一个系列组成-RedTeamScore（见屏幕截图）

我想从BlueTeamScore列中添加一个额外的系列到我的图表中。

下面是我的代码片段

<script type="text/javascript" src="/sites/Test/highcharts/SiteAssets/jquery.min.js"></script>
<script type="text/javascript" src="/sites/Test/highcharts/SiteAssets/SPServices.min.js"></script>
<script type="text/javascript" src="/sites/Test/highcharts/SiteAssets/highcharts.js"></script>
<script type="text/javascript" src="/sites/Test/highcharts/SiteAssets/moment.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
 var yearmontharray = [];
 var valuesarray = [];
 $().SPServices({
  operation: "GetListItems",
  async: false,
  listName: "Scores",
  CAMLViewFields: "<ViewFields><FieldRef Name='Date' /><FieldRef Name='RedTeamScore' /></ViewFields>",
  completefunc: function (xData, Status) {
   $(xData.responseXML).SPFilterNode("z:row").each(function() {
    var yearmonth = ($(this).attr("ows_Date"));
    var values = Math.round($(this).attr("ows_RedTeamScore"));
	var newyearmonth = moment(yearmonth).format("MMM-DD");
	
    yearmontharray.push(newyearmonth);
    valuesarray.push(values);
   });
   var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 80
            },
            title: {
                text: 'Team Scores',
                x: -20
            },
            subtitle: {
                text: 'Red and Blue Teams',
                x: -20
            },
            xAxis: {
                categories: yearmontharray,
				labels: {
				    rotation: -90
				}
            },
            yAxis: {
                title: {
                    text: 'Score'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'RedTeam',
                data: valuesarray
            }]
        });
  }
 });
 
 
  
});
</script>
<div id="container">
</div>

您可以将您的系列扩展到：

series: [{
            name: 'RedTeam',
            data: valuesarray
        },{
            name: 'BlueTeam',
            data: valuesarray2
        }]

并导入蓝色团队数据（3个新的和1个编辑行）：

...
$(document).ready(function() {
 var yearmontharray = [];
 var valuesarray = [];
 var valuesarray2 = []; //new line
 $().SPServices({
  operation: "GetListItems",
  async: false,
  listName: "Scores",
  CAMLViewFields: "<ViewFields><FieldRef Name='Date' /><FieldRef Name='RedTeamScore' /><FieldRef Name='BlueTeamScore' /></ViewFields>", //edited line
  completefunc: function (xData, Status) {
   $(xData.responseXML).SPFilterNode("z:row").each(function() {
    var yearmonth = ($(this).attr("ows_Date"));
    var values = Math.round($(this).attr("ows_RedTeamScore"));
    var values2 = Math.round($(this).attr("ows_BlueTeamScore")); //new line
    var newyearmonth = moment(yearmonth).format("MMM-DD");
    yearmontharray.push(newyearmonth);
    valuesarray.push(values);
    valuesarray2.push(values2); //new line
   });
...
相关文章：