我正在使用 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>最佳答案
我想这可能就是您要找的。如果没有，请随时告诉我。
此演示假定您从一组这样的总计开始:
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>关于javascript - 使用 ZingChart 的堆积图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31722559/