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

Posted 2023-05-07

【中文标题】Kendo UI-如何更改条形图中 X 轴的颜色

【英文标题】：Kendo UI- how to change color of the X axis in bar chart

【发布时间】：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;
    );

谢谢。

【参考方案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/