Question

我有此要求来创建具有堆叠系列的图表类型rangeColumn。这就是现在的样子。它应该堆叠列。

这是我的创建图表功能：

function createChart() {
    $("#Chart").kendoChart({
        title: {
            text: "Title",
            font: "14px 'Open Sans'",
            color: "#4D4D4D",
            align: "left",
            margin: {
                top: 20,
                bottom: 10
            }
        },
        legend: {
            position: "bottom",
            item: {
                visual: function (e) {
                    var color = e.options.markers.background;
                    var labelColor = e.options.labels.color;
                    var rect = new kendo.geometry.Rect([0, 0], [200, 50]);
                    var layout = new kendo.drawing.Layout(rect, {
                        spacing: 5,
                        alignItems: "left"
                    });
                    var marker = new kendo.drawing.Path({
                        fill: {
                            color: color
                        },
                        stroke: {
                            color: color
                        },
                    }).moveTo(10, 0).lineTo(10, 10).lineTo(0, 10).lineTo(0, 0).close();
                    var label = new kendo.drawing.Text(e.series.name, [10, 0], {
                        fill: {
                            color: labelColor
                        },
                        font: "14px 'Open Sans'"

                    });

                    layout.append(marker, label);
                    layout.reflow()

                    return layout;
                }
            }
        },
        series: [

            {
            stack: "area",
            type: "rangeColumn",
            color: "#C60C30",                 
            data: [
                [40, 60], [55, 65]
            ]
        },
        {
            type: "rangeColumn",
            color: "rgb(198, 12, 48, 0.55)", 
            data: [
                [30, 38], [44, 54]
            ]
        }
        ],
        seriesDefaults: { 
            overlay: { gradient: "none" },
            border: {
                width: 0,
                color: ""
            },                
            labels: {
                visible: false                    
            }
        },
        categoryAxis: {
            title: {
                text: "Loren ipsum",
                position: "bottom",
                font: "10px Open Sans",
                color: "#4D4D4D"
            },
            categories: ["Loren", "Ipsum"],
            majorGridLines: false,
            labels: {
                rotation: "auto"
            }
        },
        valueAxis: {
            title: {
                text: "Loren ipsum",
                position: "bottom",
                font: "10px Open Sans",
                color: "#4D4D4D"
            },
            min: 0,
            max: 100
        },
        tooltip: {
            visible: true                
        }
    });
}

我尝试了不同类型的方法来堆叠值，例如使用stack：true而不成功。 Telerik堆栈示例https://demos.telerik.com/kendo-ui/bar-charts/stacked-bar 这是文档-我想我在这里跳过了一些内容。 https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.stack

Answer 1

确实，文档说：

当series.type设置为“ bar”时，支持堆栈选项， “列”，“线”，“区域”，“ verticalLine”，“ verticalArea”，“ radarLine”， “ radarArea”或“ radarColumn”。堆栈中的所有系列必须是相同类型。

您的类型是“ rangeColumn”，不在列表中。

您可以使用“列”类型和底部的白色系列来创建从0开始的偏移量。

您也可以在https://www.telerik.com/support/feedback

请求支持stackingrangeColumn

Kendo UI图表类型范围列堆叠系列

1 个答案: