我正在使用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 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
1 回答
我想这可能就是你要找的东西 . 如果没有，请随时告诉我 .
此演示假设您从一个总计数组开始，如下所示：
我们将以编程方式将这些分为两个系列：一个低于阈值，一个高于阈值 . 然后我们在每个系列上设置所需的背景颜色 .
运行代码段以查看其运行情况 . 请记住，您可以无限次地使用不同的阈值创建额外的堆栈 .
再次，我是ZC团队的成员，所以请不要犹豫，寻求帮助！