Question

如何更改负轴的条形颜色？目前酒吧有绿色。我怎么把颜色变成红色？以下是jsfiddle的链接：http://jsfiddle.net/ZPUr4/160/

Html代码：

<div id="example" class="k-content">
    <div id="chart"></div>
</div>

JavaScript代码：

function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Site Visitors"
            },
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "column",

                labels: {
                    visible: true,
                    background: "transparent",

                }
            },
            series: [{
                name: "Total Visits",
                data: series1,
                gap: 1.0,
                spacing: 0,

            } ],
            valueAxis: {
                min: -200000,
                max: 200000,
                axisCrossingValue: 50000, 

                line: {
                    visible: true
                },
                title: {
                    text: "Availability"
                },
               minorGridLines: {
                    visible: false,
                },
                color: 'blue'
            },
            categoryAxis: {
               color: "blue",
                width: 25,
                majorGridLines: {
                    visible: false,
                    position: "bottom"
                },

                line: {
                    width: 3,
                }
            },
            tooltip: {
                visible: true,
                format: "{0}"
            }
        });
    }

var series1=[56000, -63000, 74000, 91000, 117000, 158000];


    $(document).ready(function () {
        createChart();

        $("#example").bind("kendo:skinChange", createChart);

        var chart = $("#chart").data("kendoChart"),
            firstSeries = chart.options.series;
    });

谢谢！

Answer 1

系列的color选项可以设置为函数：

        series: [{
            name: "Total Visits",
            data: series1,
            gap: 1.0,
            spacing: 0,
            color: function(data) {
                if (data.value < 0) {
                    return "green";
                }
            }
        }

然而，你的jsfiddle中的Kendo UI版本太旧了（从2012年开始）并且不支持这一点。你应该升级到更新的。

这是更新的小提琴：http://jsfiddle.net/ZPUr4/166/

如何在剑道条形图中为负条设置颜色

1 个答案: