尝试使用SharePoint列表和Highcharts在图表上放置点

Trying to put points on a chart using a SharePoint list and Highcharts

本文关键字：Highcharts SharePoint 列表更新时间：2023-09-26

此屏幕截图-https://i.stack.imgur.com/mmYHi.jpg-显示以下项目

a）我目前得到的（没有数据点）

b）我希望我的结果看起来像

c）我的SharePoint列表看起来像

（对不起，我没有足够的堆叠溢出点来发布图片）

以下是我目前拥有的代码

$(document).ready(function() {
  
 var yearmontharray = [];
 var valuesarray = [];
 
 $().SPServices({
  operation: "GetListItems",
  async: false,
  listName: "List",
  CAMLViewFields: "<viewfields><fieldref Name='Title' /><fieldref Name='values' /></ViewFields>",
  CAMLQuery: "<query><orderby><fieldref Name='Title' Ascending='True' /></OrderBy></Query>",
  completefunc: function (xData, Status) {
   $(xData.responseXML).SPFilterNode("z:row").each(function() {
    var yearmonth = ($(this).attr("ows_Title"));
    var values = Math.round($(this).attr("ows_values"));
 
    yearmontharray.push(yearmonth);
    valuesarray.push(values);
   });
  }
 });
  
chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Total values',
                x: -20
            },
            subtitle: {
                text: 'This chart shows value from SharePoint',
                x: -20
            },
            xAxis: {
                categories: yearmontharray
            },
            yAxis: {
                title: {
                    text: 'values'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'values',
                data: valuesarray
            }]
        });
 
 
  
});

如有任何帮助，我们将不胜感激！

您必须在完整的函数中包含图表的收缩。否则，在获取数据之前调用Hightchart。

$(document).ready(function () {
    var yearmontharray = [];
    var valuesarray = [];
    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "List",
        CAMLViewFields: "<viewfields><fieldref Name='Title' /><fieldref Name='values' /></ViewFields>",
        CAMLQuery: "<query><orderby><fieldref Name='Title' Ascending='True' /></OrderBy></Query>",
        completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function () {
                var yearmonth = ($(this).attr("ows_Title"));
                var values = Math.round($(this).attr("ows_values"));
                yearmontharray.push(yearmonth);
                valuesarray.push(values);
            });
            // Inside complete func <-----
            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Total values',
                    x: -20
                },
                subtitle: {
                    text: 'This chart shows value from SharePoint',
                    x: -20
                },
                xAxis: {
                    categories: yearmontharray
                },
                yAxis: {
                    title: {
                        text: 'values'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: [{
                    name: 'values',
                    data: valuesarray
                }]
            });
        }
    });
});