gpt4 book ai didi

charts - 需要具有多个系列的堆积柱形图

转载 作者:行者123 更新时间:2023-12-04 23:18:19 25 4
gpt4 key购买 nike

我一直伸着脑袋想得到具有多个系列的堆积柱形图。 使用谷歌图表或 highchart 任何合适的。

我需要实现如下图所示的内容:
chart demo

非常感谢。

最佳答案

您可以用来制作这种具有多个系列的堆积柱形图的库是 ZingChart .

这是您的图表与 ZingChart 库的 fiddle :

var myConfig = {
"type": "bar",
"labels": [{
"background-color": "green",
"x": "65%",
"y": "23px",
"height": "15px"
}, {
"text": "Win",
"font-size": "20px",
"x": "68%",
"y": "15px"
}, {
"background-color": "red",
"x": "82%",
"y": "23px",
"height": "15px"
}, {
"text": "Loss",
"font-size": "20px",
"x": "85%",
"y": "15px"
}],
"stacked": true,
"stack-type": "normal",
"background-color": "#FFFFFF",
"title": {
"text": "Win Loss Report ",
"font-family": "arial",
"x": "40px",
"y": "5px",
"align": "left",
"bold": false,
"font-size": "16px",
"font-color": "#000000",
"background-color": "none"
},
"plot": {
"-bar-width": "25px",
"hover-state": {
"visible": false
}
},
"scale-x": {
"values": [
"JAN",
"FEB",
"MAR",
"APR",
"MAY",
"JUN",
"JUL",
"AUG",
"SEP"
],
"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
],
"stack": 1,
"background-color": "red"
}, {
"values": [
13000,
8000,
5000,
20000,
17000,
10000,
34000,
6000,
5500
],
"stack": 1,
"background-color": "green"
}, {
"values": [
13000,
8000,
5000,
20000,
17000,
10000,
34000,
6000,
5500
],
"stack": 2,
"background-color": "red"
}, {
"values": [
15000,
12000,
42000,
13000,
19500,
9750,
11500,
36500,
11750
],
"stack": 2,
"background-color": "green"
}, {
"values": [
8000,
3000,
9000,
25000,
12000,
18000,
37000,
9900,
8800
],
"stack": 3,
"background-color": "red"
}, {
"values": [
11000,
10000,
32000,
10000,
10500,
8250,
9500,
30500,
9750
],
"stack": 3,
"background-color": "green"
}, {
"values": [
23000,
9000,
6000,
30000,
27000,
10000,
44000,
7000,
6500
],
"stack": 4,
"background-color": "red"
}, {
"values": [
12000,
22000,
52000,
33000,
29500,
8750,
12500,
38500,
21750
],
"stack": 4,
"background-color": "green"
}],
"tooltip": {
"visible": false
}
};

zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});
<head>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
<div id='myChart'></div>
</body>


基本上,您将设置一个堆积条形图,然后添加更多组值。在每组值中,您将分配一个堆栈编号。以下是更多详细信息的文档: http://www.zingchart.com/docs/chart-types/bar/#bar__props_stacked_additional

关于charts - 需要具有多个系列的堆积柱形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34371010/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com