将Highcharts条形图插入sharepoint 2013页面

Question

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

示例数据：

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

有人可以让我知道我在想什么吗？

<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'
}