使用 ZingChart 的堆积图

Question

我正在使用 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-7 月 200 170 170 0 200 年 8 月 14 日 100 100 0 14-9 月 200 200 200 0 14-10 月 200 280 200 80 14-11 月 200 300 200 100 12 月 14 日 200 310 200 110 15-1 月 200 330 200 130 15-2 月 200 340 200 140 3 月 15 日 400 380 380 0 15-4 月 400 390 390 0 15-5 月 400 420 400 20 15-6月 400 440 400 40 15-7 月 400 460 400 60 15-8 月 400 480 400 80 15-9 月 400 500 400 100 15-10 月 400 520 400 120 15-11 月 400 540 400 140 15-12 月 400 560 400 160 16-1 月 400 580 400 180

Sample data

Answer 1

我想这可能就是您要找的。如果没有，请随时告诉我。

此演示假定您从一组这样的总计开始：

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 的堆积图

stacked chart with ZingChart

javascript

charts

stacked-chart

zingchart