从Zingchart中删除x轴和y轴

时间:2015-08-11 22:36:17

标签: javascript charts zingchart

我想完全删除,而不是隐藏我的Zingcharts中的x和y轴。我有一个不需要x或y轴的图形,虽然我可以隐藏它们,但它们占用了宝贵的空间,从而产生了压缩图形。反正有吗?

1 个答案:

答案 0 :(得分:7)

听起来你可能会将比例设置为可见:false,但图表周围仍有很多空间,这些项目曾经是这样。

您可以通过将项目设置为visible来消除此空间:false,将关联的线条颜色属性设置为“none”并添加:

"plotarea":{ "margin":"0 0" }

到您的JSON。下面是使用上述方法移除该间距的示例。单击“运行代码段”按钮以查看生成的图表。

var myConfig = {
  "type": "line",
  "scale-x":{
    "line-color":"none",
    "item":{
      "visible":false
    },
    "tick":{
      "line-color":"none"
    }
  },
  "scale-y":{
    "line-color":"none",
    "item":{
      "visible":false
    },
    "tick":{
      "line-color":"none"
    }
  },
  "plotarea":{
    "margin":"0 0"
  },
  "series": [
    {
      "values":[20,40,25,50,15,45,33,34]
    },
    {
      "values":[5,30,21,18,59,50,28,33]
    },
    {
      "values":[30,5,18,21,33,41,29,15]
    },
    ]
};

zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= 'https://cdn.zingchart.com/2.1.2/zingchart.min.js'></script>
		<script> zingchart.MODULESDIR = 'https://cdn.zingchart.com/2.1.2/modules/';</script>
	
	<!--Inject End-->
	</head>
	<body>
		<div id='myChart'></div>
	</body>
</html>

如果您将比例设置为visible:false,则可能会产生一些问题。相反,调整样式以便它们根本看不到它们可以防止与其他功能发生冲突。我是ZingChart团队的成员,所以如果这回答了您的问题,或者您想要进一步澄清,请告诉我。