文章/答案/技术大牛

发布

社区首页 >问答首页 >如何从Kendo栏/列图中删除水平GridLines？

问如何从Kendo栏/列图中删除水平GridLines？
EN

Stack Overflow用户

提问于 2019-01-18 17:41:10

回答 2查看 2.9K关注 0票数 2

我想从图表的背景中删除水平网格线。我能够成功地消除垂直网格线。

majorGridLines: { visible: false}隐藏y轴的网格线。如果我使用相同的代码来隐藏xAxes网格线，它就不会隐藏它。

<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/bar-charts/multiple-axes">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>


</head>
<body>
<div id="example">
    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>
    <script>
        function createChart() {
            $("#chart").kendoChart({
                majorGridLines: {
                    visible: false,
                },
                legend: {
                    position: "bottom"
                },
                series: [ {
                    type: "column",
                    data: [2989, 270, 420, 890, 910, 1394, 1444],
                    stack: true,
                    name: "Room Revenue",
                    color: "#4472c3",
                    majorGridLines: {
                    visible: false,
                },
                },  {
                    type: "line",
                    data: [23, 5, 6, 22, 20, 16, 40],
                    name: "Room Sold",
                    color: "#12ccbe",
                    axis: "l100km",
                    majorGridLines: {
                    visible: false,
                },
                }],
                valueAxes: [{
                    title: { text: "miles" },
                    min: 0,
                    max: 4000,
                  visible: false,
                }, {
                   // name: "km",
                   // title: { text: "km" },
                    min: 0,
                    max: 161,
                    majorUnit: 32,
                  visible: false
                }, {
                   // name: "mpg",
                   // title: { text: "miles per gallon" },
                   // color: "#ec5e0a"
                  visible: false
                }, {
                    name: "l100km",
                  //  title: { text: "liters per 100km" },
                    color: "#4e4141",
                  visible: false
                }],
                majorGridLines: {
                    visible: false,
                },
                categoryAxis: {
                    categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                   majorGridLines: {
                    visible: false,
                },
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>


</body>
</html>

kendo-ui

kendo-chart

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-01-18 21:04:21

您只是把majorGridLine设置放在了错误的位置。将其放入valueAxis中：

 function createChart() {
        $("#chart").kendoChart({
            legend: {
                position: "bottom"
            },
            series: [ {
                type: "column",
                data: [2989, 270, 420, 890, 910, 1394, 1444],
                stack: true,
                name: "Room Revenue",
                color: "#4472c3",
            },  {
                type: "line",
                data: [23, 5, 6, 22, 20, 16, 40],
                name: "Room Sold",
                color: "#12ccbe",
                axis: "l100km",
            }],
            valueAxes: [{
                title: { text: "miles" },
                min: 0,
                max: 4000,
                visible: false,
                majorGridLines: {
                  visible: false,
                },
            }, {
               // name: "km",
               // title: { text: "km" },
                min: 0,
                max: 161,
                majorUnit: 32,
                visible: false,
                majorGridLines: {
                  visible: false,
                },
            }, {
               // name: "mpg",
               // title: { text: "miles per gallon" },
               // color: "#ec5e0a"
               visible: false,
               majorGridLines: {
                 visible: false,
               },
            }, {
                name: "l100km",
              //  title: { text: "liters per 100km" },
                color: "#4e4141",
               visible: false,
                majorGridLines: {
                   visible: false,
                },
            }],               
            categoryAxis: {
               categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
               majorGridLines: {
                visible: false,
                },
            }
        });
    }

演示

票数 2

Stack Overflow用户

发布于 2019-01-18 18:00:55

你试过用下面的东西了吗？

yAxis：{ majorGridLines：{majorGridLines：“#a00bb”，宽度: 3，可见: false }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54258979

复制

相似问题

问如何从Kendo栏/列图中删除水平GridLines？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从Kendo栏/列图中删除水平GridLines？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从Kendo栏/列图中删除水平GridLines？
EN