绘制一个完全响应的 zingchart 和一个视觉上吸引人的（宽度方向）答案

【问题标题】：Plotting a completely responsive zingchart and a visually appealing one(width-wise)绘制一个完全响应的 zingchart 和一个视觉上吸引人的（宽度方向）
【发布时间】：2017-05-11 10:09:24
【问题描述】：

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

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

代码示例（以上状态场景）：

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, 

});

【问题讨论】：

你的代码在哪里？？？
嘿，奇拉格。只是一个抬头。我已将代码与我的问题一起添加。

标签： css responsive zingchart

【解决方案1】：

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

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%' 
});

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

<!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>

链接到全屏codepen演示here

使用的资源：

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

【讨论】：