javascript – 与ZingChart叠加的图表
作者：互联网
我正在使用ZingChart库制作堆积条形图.
这是一个样本http://jsfiddle.net/api/post/library/pure/
但是假设我需要一个限制,例如颜色只有在超过15k时才会改变.那可能吗？
var myConfig =
{
"type": "bar",
"stacked": true,
"stack-type": "normal",
"background-color": "#FFFFFF",
"title": {
"text": "Mobile OS Sales - ",
"font-family": "arial",
"x": "40px",
"y": "5px",
"align": "left",
"bold": false,
"font-size": "16px",
"font-color": "#000000",
"background-color": "none"
},
"subtitle": {
"text": "<i>Since January 14, 2013</i>",
"font-family": "arial",
"x": "175px",
"y": "5px",
"align": "left",
"bold": false,
"font-size": "16px",
"font-color": "#7E7E7E",
"background-color": "none"
},
"plot": {
"bar-width": "25px",
"hover-state": {
"visible": false
}
},
"labels":[
{
"text": "11,245 Android",
"background-color": "#90A23B",
"font-size": "14px",
"font-family": "arial",
"font-weight": "normal",
"font-color": "#FFFFFF",
"padding": "10%",
"border-radius": "3px",
"offset-y":-30,
"shadow": false,
"callout": true,
"callout-height": "10px",
"callout-width": "15px",
"hook":"node:plot=2;index=4"
},
{
"text": "9,750 iOS",
"background-color": "#787878",
"font-size": "14px",
"font-family": "arial",
"font-weight": "normal",
"font-color": "#FFFFFF",
"padding": "10%",
"border-radius": "3px",
"shadow": false,
"callout": true,
"callout-height": "10px",
"callout-width": "15px",
"hook":"node:plot=2;index=5",
"offset-y": -30
},
{
"text": "15,279 Windows",
"thousands-separator": ",",
"background-color": "#FFC700",
"font-size": "14px",
"font-family": "arial",
"font-weight": "normal",
"font-color": "#FFFFFF",
"padding": "10%",
"border-radius": "3px",
"shadow": false,
"callout": true,
"callout-height": "10px",
"callout-width": "15px",
"offset-y": -30,
"hook":"node:plot=2;index=9"
}
],
"scale-x": {
"values": [
"JAN",
"FEB",
"MAR",
"APR",
"MAY",
"JUN",
"JUL",
"AUG",
"SEP",
"OCT",
"NOV",
"DEC"
],
"line-color": "#7E7E7E",
"tick": {
"visible": false
},
"guide": {
"visible": false
},
"item": {
"font-family": "arial",
"font-color": "#8B8B8B"
}
},
"scale-y": {
"values": "0:70000:10000",
"short": true,
"line-color": "#7E7E7E",
"tick": {
"visible": false
},
"guide": {
"line-style": "solid"
},
"item": {
"font-family": "arial",
"font-color": "#8B8B8B"
}
},
"series": [
{
"values": [
15000,
12000,
42000,
13000,
19500,
9750,
11500,
36500,
11750,
16000,
9800,
43279
],
"background-color": "#787878"
},
{
"values": [
13000,
8000,
5000,
20000,
17000,
10000,
34000,
6000,
5500,
15279,
1500,
2250
],
"background-color": "#FFC700"
},
{
"values": [
17000,
9000,
2000,
12500,
11245,
1750,
5500,
3000,
10000,
9750,
1500,
17750
],
"background-color": "#90A23B"
}
],
"tooltip": {
"visible": false
}
}
;
zingchart.render({
id : 'myChart',
data : myConfig,
height: 500,
width: 725
});<html>
<head>
<script src= 'https://cdn.zingchart.com/2.1.1/zingchart.min.js'></script>
<script> zingchart.MODULESDIR = 'https://cdn.zingchart.com/2.1.1/modules/';
ZC.LICENSE = ['569d52cefae586f634c54f86dc99e6a9','ee6b7db5b51705a13dc2339db3edaf6d'];</script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>样本数据 ：
日期限制总正常超额
14-Jul 200 170 170 0
200年8月14日100 100 0
14-Sep 200 200 200 0
14-Oct 200 280 200 80
14-Nov 200 300 200 100
14-Dec 200 310 200 110
200年1月15日330 200 130
15-Feb 200 340 200 140
15-Mar 400 380 380 0
15-Apr 400 390 390 0
15-May 400 420 400 20
15-Jun 400 440 400 40
15-Jul 400 460 400 60
15-Aug 400 480 400 80
15-Sep 400 500 400 100
15-Oct 400 520 400 120
15-Nov 400 540 400 140
15-Dec 400 560 400 160
16-Jan 400 580 400 180
解决方法:
我想这可能就是你要找的东西.如果没有,请随时告诉我.
此演示假设您从一个总计数组开始,如下所示：
var origSeries = [10316,23988,39643,40708,9857,18558,42194,28130,26569,23148,31424,41053,27838,38383,36105,47613,35903,40775,37769,24143];
我们将以编程方式将这些分为两个系列：一个低于阈值,一个高于阈值.然后我们在每个系列上设置所需的背景颜色.
运行代码段以查看其运行情况.请记住,您可以无限次地使用不同的阈值创建额外的堆栈.
再次,我是ZC团队的成员,所以请不要犹豫,寻求帮助！
var origSeries = [10316, 23988, 39643, 40708, 9857, 18558, 42194, 28130, 26569, 23148, 31424, 41053, 27838, 38383, 36105, 47613, 35903, 40775, 37769, 24143];
var series1 = [];
var series2 = [];
function calcThreshold(array, threshold) {
var difference;
array.forEach(function(el, index, array) {
difference = el - threshold;
if (difference <= 0) {
series1.push(el);
series2.push(null);
} else {
series1.push(threshold);
series2.push(difference);
}
});
}
calcThreshold(origSeries, 15000);
var myConfig = {
"type": "bar",
"stacked": true,
"stack-type": "normal",
"background-color": "#FFFFFF",
"title": {
"text": "Mobile OS Sales - ",
"font-family": "arial",
"x": "40px",
"y": "5px",
"align": "left",
"bold": false,
"font-size": "16px",
"font-color": "#000000",
"background-color": "none"
},
"subtitle": {
"text": "<i>Since January 14, 2013</i>",
"font-family": "arial",
"x": "175px",
"y": "5px",
"align": "left",
"bold": false,
"font-size": "16px",
"font-color": "#7E7E7E",
"background-color": "none"
},
"plot": {
"bar-width": "25px",
"hover-state": {
"visible": false
}
},
"scale-x": {
"values": [
"JAN",
"FEB",
"MAR",
"APR",
"MAY",
"JUN",
"JUL",
"AUG",
"SEP",
"OCT",
"NOV",
"DEC"
],
"line-color": "#7E7E7E",
"tick": {
"visible": false
},
"guide": {
"visible": false
},
"item": {
"font-family": "arial",
"font-color": "#8B8B8B"
}
},
"scale-y": {
"values": "0:70000:10000",
"short": true,
"line-color": "#7E7E7E",
"tick": {
"visible": false
},
"guide": {
"line-style": "solid"
},
"item": {
"font-family": "arial",
"font-color": "#8B8B8B"
}
},
"series": [{
"values": series1,
"background-color": "#787878"
}, {
"values": series2,
"background-color": "#ff4900"
}],
"tooltip": {
"visible": false
}
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 500,
width: 725
});<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>标签：zingchart,javascript,charts,stacked-chart 来源： https://codeday.me/bug/20190824/1708991.html