kendo-ui - 如何从剑道条形图/柱形图中删除水平网格线?
问题描述
我想从图表的背景中删除水平网格线。我能够成功删除垂直网格线。
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>
解决方案
您只是将 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,
},
}
});
}
演示
推荐阅读
- c# - 在长时间运行的工作中防止更改
- java - Spring - addResourceHandlers 不使用 Rest Controller 解析静态资源
- arduino - 无法在 platfromio 中编译 arduino 代码
- git - makefile 中的 grep 函数
- css - 无法居中按钮变体
- c# - 使用 Autofac 注入的 ILogger 不会在 AzureFunctionTools 窗口(AzureFunctionsV2)上记录任何内容
- javascript - 如何使用 jQuery 修复视差平滑滚动?
- angular - 子路径上的角度延迟加载错误
- javascript - 如何使用 jquery 附加数据以形成集体选择 optgroup 标记
- apache-spark - 带有 Hive 的 Spark 是否可以将项目阶段推送到 HiveTableScan?