3

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 14-8月 200 100 100 0 14-9月 200 200 200 0 14-10月 200 280 200 80 14-11月 200 300 200 100 14-12月 200 020 0 310 15-1月 200 330 200 130 15-2月 200 340 200 140 15-3月 400 380 380 0 15-4月 400 390 390 0 15-5月 400 420 400 20 15-6月 400 440 400 0 4 6 40 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 18

サンプルデータ

4

1 に答える 1

6

これはあなたが探しているものかもしれないと思います。そうでない場合は、お気軽にお知らせください。

このデモでは、次のような合計の 1 つの配列から開始することを前提としています。

var origSeries = [10316,23988,39643,40708,9857,18558,42194,28130,26569,23148,31424,41053,27838,38383,36105,47613,35903,40775,37769,24143];

これらをプログラムで 2 つの系列に分割します。1 つはしきい値を下回っており、もう 1 つはしきい値を上回っています。次に、各シリーズに目的の背景色を設定します。

スニペットを実行して動作を確認します。異なるしきい値を使用して追加のスタックを作成するために、これを無限に実行できることを覚えておいてください。

繰り返しますが、私は 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>

于 2015-07-31T19:14:59.303 に答える