Вставка диаграммы столбцов 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' 
}