Question

我有一个条形图，可以呈现两个条形图。一个条形的颜色由函数确定，但该条形的标签背景颜色呈现黑色。我需要它来呈现从colorStatus函数返回的相同颜色。

    $("#foo").kendoChart({
        dataSource: source,
        legend: {
            labels: {
                font: "0.8em Segoe UI"
            },
            position: "bottom"
        },
        chartArea: {
            background: "transparent",
            height: 150
        },
        seriesDefaults: {
            type: "bar"
        },
        seriesColors: [ colorStatus, "darkcyan"],
        series: [
            { name: "YTD Actual", field: "YTDActual" },
            { name: "YTD Budget", field: "YTDBudget" }
        ],
        valueAxis: {
            visible: false,
            majorGridLines: {
                visible: false
            }
        },
        categoryAxis: {
            majorGridLines: {
                visible: false
            },
            line: {
                visible: false
            }
        },
        tooltip: {
            visible: true,
            format: "{0:C}",
            font: "0.8em Segoe UI",
            template: "#= dataItem.AccountName # <br/> #= kendo.toString(value, 'c') #"
        }
    });

    function colorStatus(e) {
        if (e.dataItem.YTDBudget < e.dataItem.YTDActual) {
            return "red";
        }
        return "green";
    }

我尝试将颜色和colorStatus传递给图例＆gt;标签＆gt;背景对象，但仍然传说标签背景呈现黑色。

澄清 YTDActual系列的标签呈现黑色。 YTDBudget呈现darkcyan。

Answer 1

许多kendoChart属性可能是函数

要将系列项目标签的背景设置为系列项目的颜色，您可以执行以下操作：

series: [{
    { name: "YTD Actual", field: "YTDActual" },
    { name: "YTD Budget", field: "YTDBudget" }
    labels: {
        background: function (item) {
            var series = item.series;
            return series.data[item.index].color;
        } 
    }
}],

我没有复制你的代码来尝试它，但这在本地数据源上运行良好。

Kendo UI基于自定义功能更改图表标签背景颜色

1 个答案: