Kendo UI-如何更改条形图中 X 轴的颜色答案

【问题标题】：Kendo UI- how to change color of the X axis in bar chartKendo UI-如何更改条形图中 X 轴的颜色
【发布时间】：2014-07-08 17:51:22
【问题描述】：

这是条形图的链接：http://jsfiddle.net/ZPUr4/143/

如何将 X 轴的颜色更改为 0？
如何在栏的顶部显示系列数据值？截至目前，负值也显示在底部。

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
            }, {
                name: "Unique visitors",
                data: series2,
                gap: 1.0
            }],
            valueAxis: {
                min: -200000,
                max: 200000,
                axisCrossingValue: 50000,  
                line: {
                    visible: false
                },
                title: {
                    text: "Availability"
                },

                color: 'blue'
            },
            categoryAxis: {
               // categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                majorGridLines: {
                    visible: true,
                    position: "bottom"
                }
            },
            tooltip: {
                visible: true,
                format: "{0}"
            }
        });
    }

var series1=[56000, 63000, 74000, 91000, 117000, 158000];
var series2= [-52000, 34000, 23000, -98000, 67000, 83000];

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

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

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

谢谢。

【问题讨论】：

标签： kendo-ui kendo-dataviz kendo-chart

【解决方案1】：

在categoryAxis 上设置color 属性。

例子：

categoryAxis: {
    color: "blue",
    majorGridLines: {
        visible: true,
        position: "bottom"
    }
},

您的 JSFiddle 已修改：http://jsfiddle.net/OnaBai/ZPUr4/144/

关于如何在顶部放置值，您可以使用以下方式控制为所有系列定义默认属性的位置：

    seriesDefaults: {
        type: "column",
        labels: {
            visible: true,
            background: "transparent",
            position: "above",
            padding: -20
        }
    },

或为特定系列定义它：

    series: [
        {
            name: "Total Visits",
            data: series1,
            gap: 1.0,
            spacing: 0
        }, 
        {
            labels: {
                position: "above",
                padding: -20
            },
            name: "Unique visitors",
            data: series2,
            gap: 1.0
        }
    ],

修改后的 JSFiddle：http://jsfiddle.net/OnaBai/ZPUr4/150/

【讨论】：