如何从 CanvasJS 图表中完全删除 Y-Axis
How to remove Y-Axis completely from CanavasJS chart
我正在使用 canvasJS 图表,我想完全 remove/hide Y-Axis。
这是一个 JSFiddle 示例,其中我已经能够删除 Y-Axis 行和标题。
我发现以下属性可以隐藏标题并删除行,但是我无法删除 Y-Axis.
上的值
lineThickness: 0,
gridThickness: 0,
tickThickness: 0
但是我还想删除数据,即从 0 到 90 的数字。
您可以通过将 labelFormatter. When you set labelFontSize to 0, labels will still occupy some space which is not the case with labelFormatter. The case is same when you use tickThickness - instead you can set tickLength 设置为 0 来实现您的要求。
请在下面找到更新后的代码:
var chart = new CanvasJS.Chart("chartContainer", {
backgroundColor: "transparent",
axisX:{
lineThickness: 0,
tickLength: 0,
labelFormatter: function(e) {
return "";
}
},
axisY:{
lineThickness: 0,
gridThickness: 0,
tickLength: 0,
labelFormatter: function(e) {
return "";
}
},
data: [{
type: "line",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 200px; width: 100%;"></div>
我正在使用 canvasJS 图表,我想完全 remove/hide Y-Axis。 这是一个 JSFiddle 示例,其中我已经能够删除 Y-Axis 行和标题。 我发现以下属性可以隐藏标题并删除行,但是我无法删除 Y-Axis.
上的值lineThickness: 0,
gridThickness: 0,
tickThickness: 0
但是我还想删除数据,即从 0 到 90 的数字。
您可以通过将 labelFormatter. When you set labelFontSize to 0, labels will still occupy some space which is not the case with labelFormatter. The case is same when you use tickThickness - instead you can set tickLength 设置为 0 来实现您的要求。
请在下面找到更新后的代码:
var chart = new CanvasJS.Chart("chartContainer", {
backgroundColor: "transparent",
axisX:{
lineThickness: 0,
tickLength: 0,
labelFormatter: function(e) {
return "";
}
},
axisY:{
lineThickness: 0,
gridThickness: 0,
tickLength: 0,
labelFormatter: function(e) {
return "";
}
},
data: [{
type: "line",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 200px; width: 100%;"></div>