我有过去一个月的电压数据。图形 y 轴不一致。可能是什么问题? 图表图像
提交请求
将来,我们建议将图表 JSON 添加到您的问题中,以便我们可以为您的解决方案创建演示。您可以在此处阅读有关获取图表 JSON 的更多信息。
溶液
您有series
值输入为字符串。你可以做两件事。
- 将值设为数字而不是字符串
- 将值保留为字符串,并在
zingchart.render
方法之前添加zingchart.QUOTEDVALUES = true
。这告诉 ZingChart 你有意为值设置字符串。使用 String 值有好处和用例,因此默认设置是将其设置为 false。
演示:https://app.zingsoft.com/demos/embed/OIJAJIA7
// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
gui: {
contextMenu: {
button: {
visible: false
}
}
},
globals: {
shadow: false,
fontFamily: 'Helvetica'
},
type: 'area',
legend: {
layout: 'x4',
marker: {
borderRadius: '50px',
borderColor: 'transparent'
},
item: {
fontColor: 'white'
},
backgroundColor: 'transparent',
borderColor: 'transparent'
},
tooltip: {
visible: false
},
plot: {
aspect: 'spline',
marker: {
visible: false
},
lineWidth: '2px'
},
// values are strings
series: [{
text: 'Cell Two (V) Optimum 8V',
backgroundColor1: '#77d9f8',
values: ['0.286907020873', '0.300569259962', '0.300569259962', '0.286907020873','0.286957020873' ],
backgroundColor2: '#272822',
lineColor: '#40beeb',
palette: 1
}],
backgroundColor: '#434343',
scaleX: {
transform: {
type: 'date'
},
values: ['2019/08/05 10:27', '2019/08/05 10:42', '2019/08/05 10:55', '2019/08/05 10:58', '2019/08/05 11:01'],
zooming: true,
tick: {
lineColor: 'white',
lineWidth: '1px'
},
item: {
fontColor: 'white'
},
guide: {
visible: false
},
maxItems: 8,
lineColor: 'white',
lineWidth: '1px'
},
scaleY: {
tick: {
lineColor: 'white',
lineWidth: '1px'
},
guide: {
lineStyle: 'solid',
lineColor: '#626262'
},
item: {
visible: true,
fontColor: 'white'
},
lineColor: 'white',
lineWidth: '1px'
},
crosshairX: {
scaleLabel: {
backgroundColor: '#fff',
fontColor: 'black'
},
plotLabel: {
_text: 'Number of hits : %v',
backgroundColor: '#434343',
fontColor: '#FFF'
}
}
};
zingchart.QUOTEDVALUES = true;
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
data: chartConfig
});
});
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.chart--container {
min-height: 150px;
width: 100%;
height: 100%;
}
.zc-ref {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
</div>
</body>
</html>