【问题标题】:How to remove Y-Axis completely from CanavasJS chart如何从 CanavasJS 图表中完全删除 Y 轴
【发布时间】:2019-11-08 10:22:21
【问题描述】:

我正在使用 canvasJS 图表,我想完全删除/隐藏 Y 轴。 这是一个JSFiddle 示例,其中我能够删除 Y 轴和标题。 我发现以下属性可以隐藏标题并删除行,但是我无法删除 Y 轴上的值。

lineThickness: 0,
gridThickness: 0,
tickThickness: 0

但是我也想删除数据,即从 0 到 90 的数字。

【问题讨论】:

  • 嗨,Ahmed,labelFontSize:0 似乎有效。

标签: javascript html typescript jsfiddle canvasjs


【解决方案1】:

您可以通过设置labelFormatter 来实现您的要求。当您将labelFontSize 设置为 0 时,标签仍会占用一些空间,而 labelFormatter 则不然。当您使用tickThickness 时情况相同 - 您可以将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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-02-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-13
    相关资源
    最近更新 更多