Kendo UI 图表类型 rangeColumn 堆叠系列答案

【问题标题】：Kendo UI Chart type rangeColumn stacked seriesKendo UI 图表类型 rangeColumn 堆叠系列
【发布时间】：2019-08-19 06:32:47
【问题描述】：

我有这个要求来创建一个带有堆叠系列的图表类型 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

【问题讨论】：

标签： javascript kendo-ui kendo-chart

【解决方案1】：

确实，文档说：

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

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

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

您也可以在https://www.telerik.com/support/feedback 请求对堆叠rangeColumn 的支持

【讨论】：