Question

在示例中：http://jsfiddle.net/ZPUr4/149/如何将第一个网格的颜色更改为其他颜色？截至目前，整个图形背景颜色默认为白色。我想只改变前两个条形（X和Y轴两侧）的网格颜色？

以下是HTML代码：

JS代码：

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: {
               color: "blue",
                width: 25,
                majorGridLines: {
                    visible: true,
                    position: "bottom"
                },
                line: {
                    width: 3,
                }
            },
            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;
    });

**已编辑** 查看此处的图片：http://tinypic.com/view.php?pic=10pd56s&s=8#.U42n-vmSxN8 只有标记为黑色的块必须是灰色的。可以这样做吗？

感谢。

Answer 1

由于我没有明确要求，所以我更新了Chart中的所有颜色。

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

                color: 'blue'
            },
            categoryAxis: {
               color: "blue",
                width: 25,
                majorGridLines: {
                    visible: true,
                    position: "bottom",
                    color: "#FF00FF"
                },
                line: {
                    width: 3,
                }
            },
            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;
    });

Demo

Color Code

如果有任何疑虑，请告诉我。

剑道条形图 - 如何更改第一个网格颜色？

1 个答案: