Question

我正在使用ZingChart库制作堆积条形图。以下是http://jsfiddle.net/api/post/library/pure/示例但是假设我需要一个限制，例如颜色只有在超过15k时才会改变。这可能吗？

$url = "http://test.forsms.com/api/sendmsg.php user=*******&pass=********&sender=*****&phone=&text=Test SMS&priority=Priority&stype=smstype";
header("Location: $url");
exit;

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 
});

样本数据：日期限制总正常超额 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

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

1 个答案: