Question

需要绘制完全响应的zingchart＆amp;视觉上准确。据我所知，我们需要为我们要绘制zingchart的div提供％（例如：100％或80％）的高度和宽度。在编写zingchart.render函数时，我们可以省略其中的height和width属性。此处的图表以100％宽度绘制，或者我为div提供的图表。

我在这里面临的问题：当图表具有最小数量的数据并且以100％宽度绘制时，它看起来并不具有视觉吸引力（看起来很大）。那么我们有什么方法可以让zingchart根据输入的数据自动绘制宽度。

代码示例（对于上述状态scenraio）：

HTML：

<div id='myChart'></div>

CSS：

    html, body, #myChart {
  height:100%;
  width:100%;
}

JS：

    var myConfig = {
  type: "bar",
  series: [
    {
      values:[20,40]
    },
    {
      values:[5,30]
    },
    {
      values:[30,20]
    }
  ]
};

zingchart.render({ 
    id : 'myChart', 
    data : myConfig, 

});

Answer 1

您可以做的是根据屏幕尺寸调整图表的barWidth。您可以通过定义mediaRules来完成此操作，我们的库与CSS 媒体查询相同。在非常大的屏幕上呈现barWidth:55，其固定宽度看起来不错。然后在较小的屏幕尺寸切换到barWidth:'100%'。

＆＃13;

var myConfig = {
 	type: 'bar',
 	plot: {
 	  barWidth: 55,
 	  mediaRules: [
 	    {
 	      maxWidth: 1111,
 	      barWidth: '100%'
 	    }  
 	  ]
 	},
	series: [
		{
			values: [35,42,67,89,25,34,67,85]
		},
		{
			values: [35,42,67,89,25,34,67,85]
		}
	]
};

zingchart.render({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%' 
});

＆＃13;

html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
.zc-ref {
	display:none;
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>

＆＃13;

链接到全屏codepen demo here

使用的资源：

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/ https://www.zingchart.com/docs/tutorials/chart-elements/media-rules/

绘制完全响应的zingchart和视觉上吸引人的zingchart（宽度方面）

1 个答案: