Question

我正在尝试为我的Sharepoint列表插入一个条形图，但由于某种原因我无法显示它。该列表被称为＆＃34; GPS III原因代码＆＃34;并有两列。第1列有一个名称，第2列有一个下拉选择菜单中的值。如何更改下面的代码，以便计算第2列中每个值的出现次数并创建条形图？

示例数据：

＆＃13;

|Column 1  |  Column 2 
---------------------------
| Bob      | Option 1
| Dave     | Option 2 
| Tom      | Option 1 
| Dan      | Option 5
| Jason    | Option 1

＆＃13;

有人能让我知道我遗失的地方吗？

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>

<script type="text/javascript">
var splistitems;
var seriesarray = new Array();

ExecuteOrDelayUntilScriptLoaded(GetChartData, "sp.js");

function GetChartData() {
   seriesarray = [];
   var currentcontext = new SP.ClientContext.get_current();
   var splist = currentcontext.get_web().get_lists().getByTitle('GPS III Cause Codes');
   var splistquery = new SP.CamlQuery();
   splistitems = splist.getItems(splistquery);
   currentcontext.load(splistitems);
   currentcontext.executeQueryAsync(Function.createDelegate(this, GetChartDataSuccess), Function.createDelegate(this, GetChartDataFail));
}

function GetChartDataSuccess(sender, args) {
   var splistitemcount = splistitems.get_count();
   if (splistitemcount != 0) {
      var splistitemenumerator = splistitems.getEnumerator();
      while (splistitemenumerator.moveNext()) {
         var currentlistitem = splistitemenumerator.get_current();
         var itemname = currentlistitem.get_item("Title");
         var causecode = currentlistitem.get_item("Cause Code");
         var seriesitem = {
                           name: itemname,
                           data: [ causecode ]
                       };
         seriesarray.push(seriesitem);
      }
      DrawChart();
   }
}


function GetChartDataFail(sender, args) {
   alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

function DrawChart() {
        fruitChart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart-container',
                type: 'column'
            },
            title: {
                text: 'Cause Code Trends'
            },
            xAxis: {
                categories: ['Discussion', 'Document/Procedure Request', 'Data Request', 'SpaceX response/clarification', 'Identification','Documentation Error', 'Missing Testing Results', 'Out of Tolerance Results'] 
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Number of Requests'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray'
                    }
                }
            },
            legend: {
                false
            },

            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        }
                    }
                }
            },
            series: seriesarray
        });
}

</script>

Answer 1

您的代码包含错误...您是否尝试查看浏览器控制台返回的内容？这部分：

legend: {
     false
}

语法不正确。它应该是：

legend: {
    enabled: false
}

然后，seriesarray的格式对于您想要绘制的内容不正确。你应该给出一个这种格式的数组：

[{name: name, y: value},...]

所以你的代码变成了：

var seriesitem = {
      name: itemname,
      y: count
};
seriesarray.push(seriesitem);

在图表定义中，将xAxis更改为：

xAxis: {
    type: 'category'
}

将Highcharts条形图插入sharepoint 2013页面

1 个答案: