如何解决Chrome中不正确的分组条形图? [英] How to solve incorrect grouped bar chart in Chrome?

问题描述

我正在创建像这样的分组条形图:

I'm creating a grouped bar chart like this:

$("#chart").kendoChart({
        dataSource: {
        data: rawdata,
        group: { field: "Serie" },
    },
    legend: {
        position: "top"
    },
    plotArea: {
        background: "white",
    },
    seriesDefaults: {
        type: "column",
        style: "smooth",
        stack: true
    },
    series: [
        {
            field: 'Valor1',
            labels: {
                visible: true,
                background: '',
                format: 'p1',
                color: 'white',
                position: 'center'
            },
        }
    ],
    valueAxis: {
        max: 1,
        labels: {
            format: "p2"
        },
        line: {
            visible: false
        },
        axisCrossingValue: -10,
    },
    categoryAxis: {
        field: "Segmento",
        majorGridLines: {
            visible: false
        }
    },
    tooltip: {
        visible: true,
        template: "#= series.name # <br /> " +
            "Valor = #= kendo.format('{0:p2}', value) # <br/> " +
            "Tooltip = #= dataItem.Tooltip # ",
    }
});

我的数据具有四个属性:Serie，Segmento，Valor1，Tooltip.一个数据点的示例:

My data has four properties: Serie, Segmento, Valor1, Tooltip. Example of one data point:

{
    "Serie": "S1",
    "Segmento": "C1",
    "Valor1": 0.31500380634422465,
    "Tooltip": 20,
}

在chrome中，堆栈条的值不正确，但在Firefox中是正确的.

The values of the stack bar are incorrect in chrome but in firefox and ie it's fine.

在Firefox中更正图形，即: chrome中的图形不正确:

Correct graph in firefox and ie: Incorrect graph in chrome:

这是一个实时演示: http://trykendoui.telerik.com/anET/9

我该如何解决?

推荐答案

这是Chrome的Array.sort实现的问题；请参见此讨论. 您可以通过对数据源进行显式排序来解决此问题:

This is a problem with Chrome's implementation of Array.sort; see this discussion. You can fix it by sorting the data source explicitly:

dataSource: {
    data: rawdata,
    group: { field: "Serie" },
    sort: [{ field: "Serie", dir: "asc"}, { field: "Segmento", dir: "asc"} ]
},

( ="更新的演示)

这篇关于如何解决Chrome中不正确的分组条形图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！