堆积图与ZingChart [英] stacked chart with ZingChart
问题描述
我使用ZingChart库制作堆叠条形图。
下面是一个示例 http://jsfiddle.net/api/post/library/纯/
，但是假设我需要一个限制，例如颜色只有超过15k才会改变。可能吗？
< 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>
示例数据：
日期限制$ b 14-Jul 200 170 170 0
14-Aug 200 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
15-Jan 200 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,4763,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 ）; 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}， ：{text：< i> Since 2013年1月14日< / i>，font-family：arial，x：175px，y：5px align：left，bold：false，font-size：16px，font-color：＃7E7E7E，background- bar-width：25px，hover-state：{visible：false}}，scale-x：{values：[JAN，FEB，MAR APR，MAY，JUN，JUL，AUG，SEP，OCT，NOV，DEC]，线颜色：＃7E7E7E ：{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} ：{line-style：solid}，item：{font-family：arial，font-color：＃8B8B8B}} ：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>
[/ div>
I'm making stacked bar chart with ZingChart library. Here is a sample http://jsfiddle.net/api/post/library/pure/ but suppose i need a limit , e.g the color should only change if it exceeds 15k. Is that possible?
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>
Sample Data : Date Limit Total Normal Excess 14-Jul 200 170 170 0 14-Aug 200 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 15-Jan 200 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
I think this might be what you're looking for. Feel free to let me know if not.
This demo assumes that you start with one array of totals like this:
var origSeries = [10316,23988,39643,40708,9857,18558,42194,28130,26569,23148,31424,41053,27838,38383,36105,47613,35903,40775,37769,24143];
We'll programmatically split these into two series: one that is below threshold and one that is above. Then we set the desired background color on each series.
Run the snippet to see it in action. Remember, you could do this an infinite number of times to create additional stacks using different thresholds.
Again, I'm on the ZC team so don't hesitate to reach out for help!
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
