时间戳

首页 > 解决方案 > KendoUI 100% 堆积柱形图未正确显示

php - KendoUI 100% 堆积柱形图未正确显示

问题描述

我有一个 Kendo UI 100% 堆积柱形图，使用 PHP 包装器创建，绑定到远程数据源，但它显示的数据不正确。

PHP 包装器生成以下 jQuery 脚本：

jQuery(function(){jQuery("#CRMIssueQuery").kendoChart({
    "title":{
        "text":"Nyert \u00e9s vesztett ig\u00e9nyek ar\u00e1nya forr\u00e1sonk\u00e9nt"
    },
    "seriesDefaults":{
        "type":"column",
        "stack":{"type":"100%"},
        "style":"smooth"
    },
    "legend":{"position":"bottom"},
    "dataSource":{
        "transport":{
            "read":{
                "url":"http:\/\/localhost\/g4s_portal\/?page=chart-data&mode=chart-data&w=1&id=17&type=column&from=2018.03.27&to=2018.04.26",
                "type":"POST",
                "dataType":"json"
            }
        }
    },
    "categoryAxis":[{
        "labels":{"rotation":-45},
        "crosshair":{"visible":false},
        "majorGridLines":{"visible":false},
        "majorTicks":{"visible":true}
    }],
    "valueAxis":[{
        "majorGridLines":{"visible":true}
    }],
    "pdf":{
        "fileName":"CRMIssueQuery_2018_04_26_10_04_18.pdf",
        "proxyURL":"http:\/\/localhost\/g4s_portal\/?page=chart-data&mode=pdf&w=1"
    },
    "tooltip":{
        "visible":true,
        "format":"{0}",
        "template":"#= series.name #: #= value #"
    },
    "chartArea":{
        "background":"transparent"
    },
    "dataBound":OnDataBoundChart,
    "series":[
        {"field":"Nyert","categoryField":"Name","name":"Nyert"},
        {"field":"Vesztett","categoryField":"Name","name":"Vesztett"}
    ]
});});

这是我从远程数据源获得的数据：

[{"Name":"Belső megkeresés","Nyert":"69","Vesztett":"2"},
 {"Name":"E-mail","Nyert":"8","Vesztett":"13"},
 {"Name":"Honlap","Nyert":"4","Vesztett":"6"},
 {"Name":"Telefon","Nyert":"59","Vesztett":"14"}]

这是我得到的图表： 在此处输入图像描述

似乎，称为“Nyert”的第一个数据值始终为 100%，而第二个数据值“Vesztett”从 100% 开始，并以第一个数据值或两者之和的速率增长。

可能给定的远程数据的结构是问题所在，这很好，因为我也可以控制它，但我似乎找不到任何此类图表所需结构的示例。

这是一个具有预期结果的剑道道场。唯一的区别是，这里的数据来自本地绑定。

标签： phpjquerykendo-uikendo-chart

解决方案

尝试使用整数值而不是字符串值。这应该够了吧：

[{"Name":"Belső megkeresés","Nyert":69,"Vesztett":2},
{"Name":"E-mail","Nyert":8,"Vesztett":13},
{"Name":"Honlap","Nyert":4,"Vesztett":6},
{"Name":"Telefon","Nyert":59,"Vesztett":14}]

推荐阅读