Canvas. js столбчатая диаграмма с накоплением без создания новой метки для данных - PullRequest
Новая
       141

Canvas. js столбчатая диаграмма с накоплением без создания новой метки для данных

0 голосов
/ 09 февраля 2020

Я использовал canvas. js для создания гистограммы с накоплением, а для заполнения графика я использую данные, полученные из вызовов ajax. Но в зависимости от данных в моей базе данных иногда распределение сгруппированных элементов является правильным, но с неправильной меткой, а в других случаях для одной и той же метки есть несколько столбцов.

Кто-нибудь знает, почему это может быть; 

<!DOCTYPE HTML>
<html>
<head>  
<script src="jquery-3.3.1.js"></script>
<script>
window.onload = function () {
var  skillsMetrics1 = [];
var skillsMetrics2=[];
var skillsMetrics3=[];
var skillsMetrics4=[];

$.ajax({
    url: "/skillsMetrics1", 
    dataType: 'json'

}).then(function(data) {

    skillsMetrics1=[];
    var integer = 0; 
 var k = 0;
$.each(data, function (i, item) {
if(k==0){
        integer=parseInt(item);
        k++;
         }
else{

 if(k==1){
 skillsMetrics1.push({ y: integer, label: item });
 k=0;
 }

 }
});



});
$.ajax({
    url: "/skillsMetrics2", 
    dataType: 'json'

}).then(function(data) {

    skillsMetrics2=[];
    var integer = 0; 
 var k = 0;
$.each(data, function (i, item) {
if(k==0){
        integer=parseInt(item);
        k++;
         }
else{

 if(k==1){
 skillsMetrics2.push({ y: integer, label: item });
 k=0;
 }

 }
});

});
$.ajax({
    url: "/skillsMetrics3", 
    dataType: 'json'

}).then(function(data) {

    skillsMetrics3=[];
    var integer = 0; 
 var k = 0;
$.each(data, function (i, item) {
if(k==0){
        integer=parseInt(item);
        k++;
         }
else{

 if(k==1){
 skillsMetrics3.push({ y: integer, label: item });
 k=0;
 }

 }
});

});
$.ajax({
    url: "/skillsMetrics4", 
    dataType: 'json'

}).then(function(data) {

    skillsMetrics4=[];
    var integer = 0; 
 var k = 0;
$.each(data, function (i, item) {
if(k==0){
        integer=parseInt(item);
        k++;
         }
else{

 if(k==1){
 skillsMetrics4.push({ y: integer, label: item });
 k=0;
 }

 }
});

});
//dataa.push({ y: 350, label: "Lobby Chair" }); 
           setTimeout(function() {
var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2", //"light1", "dark1", "dark2"
    title:{
        text: "Skills Metrics"             
    },
    axisY:{
        interval: 10,
        suffix: "%"
    },
    toolTip:{
        shared: true
    },
    data:[{
        type: "stackedBar100",
        toolTipContent: "{label}<br><b>{name}:</b> {y} (#percent%)",
        showInLegend: true, 
        name: "Level 1",
        dataPoints: skillsMetrics1
        },
        {
            type: "stackedBar100",
            toolTipContent: "<b>{name}:</b> {y} (#percent%)",
            showInLegend: true, 
            name: "Level 2",
            dataPoints: skillsMetrics2
        }, 
        {
            type: "stackedBar100",
            toolTipContent: "<b>{name}:</b> {y} (#percent%)",
            showInLegend: true, 
            name: "Level 3",
            dataPoints: skillsMetrics3
    },
    {
        type: "stackedBar100",
        toolTipContent: "<b>{name}:</b> {y} (#percent%)",
        showInLegend: true, 
        name: "Level 4",
        dataPoints: skillsMetrics4
}]
});
chart.render();

}
,10000);
}       
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
...