如何从剑道条形图/柱形图中删除水平网格线？
Posted
技术标签:
【中文标题】如何从剑道条形图/柱形图中删除水平网格线？【英文标题】：How to remove horizontal GridLines from Kendo bar / column chart? 【发布时间】：2019-06-13 00:20:01 【问题描述】：我想从图表的背景中删除水平网格线。我能够成功删除垂直网格线。
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>
【问题讨论】：
【参考方案1】：你只是在错误的地方设置了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,
,
);
DEMO
【讨论】：
非常感谢@ezanker。我刚刚尝试过并为我工作！【参考方案2】：您尝试过使用下面的方法吗？ y轴： 主要网格线： 颜色：“#aa00bb”， 宽度：3， 可见：假
【讨论】：
是的，我也尝试过，但没有运气。这是我试过的链接docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/…以上是关于如何从剑道条形图/柱形图中删除水平网格线？的主要内容，如果未能解决你的问题，请参考以下文章