HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
var dataSet = anychart.data.set([
2
['1', 90, 10, 0],
3
['2', 40, 60, 0],
4
['3', 30, 30, 40],
5
['4', 20, 30, 50],
6
['5', 10, 30, 60]
7
]);
8
9
// map data for the first series, take x from the zero column and value from the first column of data set
10
var firstSeriesData = dataSet.mapAs({ x: 0, value: 1});
11
12
// map data for the second series, take x from the zero column and value from the second column of data set
13
var secondSeriesData = dataSet.mapAs({ x: 0, value: 2 });
14
15
// map data for the second series, take x from the zero column and value from the third column of data set
16
var thirdSeriesData = dataSet.mapAs({ x: 0, value: 3 });
17
18
19
20
// create bar chart
21
var chart = anychart.bar();
22
chart.barGroupsPadding(0);
23
chart.xAxis().title("影响程度");
24
chart.yAxis().title("发生概率");
25
// turn on chart animation
26
chart.animation(true);
27
28
// force chart to stack values by Y scale.
29
chart.yScale().stackMode('percent');
30
31
// set chart title text settings
32
//chart.title('风险评分');
33
34
// set yAxis labels formatting, force it to add % to values
35
chart.yAxis(0).labels().format('{%Value}');
36
37
// helper function to setup label settings for all series
38
var setupSeriesLabels = function (series, name,fill) {
39
series.name(name);
40
series.hovered().stroke('3 #fff 1');
41
series.normal().fill(fill);
42
};
43
44
// temp variable to store series instance
45
var series;
46
47
// create first series with mapped data
48
series = chart.bar(firstSeriesData);
49
setupSeriesLabels(series, '低','#2A992A');
50
51
// create second series with mapped data
52
series = chart.bar(secondSeriesData);
53
setupSeriesLabels(series, '中','#FFB206');
54
55
// create third series with mapped data
56
series = chart.bar(thirdSeriesData);
57
setupSeriesLabels(series, '高','#C2191B');
58
59
// create fourth series with mapped data
60
//series = chart.bar(fourthSeriesData);
61
//setupSeriesLabels(series, 'Nevada');
62
63
// turn on legend
64
chart.legend().enabled(true).fontSize(10).padding([0, 0, 15, 0]);
65
66
//chart.interactivity().hoverMode('by-x');
67
68
chart.tooltip().displayMode('union');
69
70
// set container id for the chart
71
chart.container('container');
72
// initiate chart drawing
73
chart.draw();