需要绘制一个完全响应和视觉准确的图表。据我所知，我们需要为要绘制 zingchart 的div 提供以 % 为单位的高度和宽度(例如：100% 或 80%(。在编写 zingchart.render 函数时，我们可以省略其中的高度和宽度属性。这里的图表以 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,
});
您可以
做的是根据屏幕尺寸调整图表的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>链接到全屏代码笔演示在这里
使用的资源：
https://www.zingchart.com/docs/api/json-configuration/graphset/plot/https://www.zingchart.com/docs/tutorials/chart-elements/media-rules/