我使用了D3js的以下教程来生成我喜欢的图表。但我必须打开HTML文件才能查看生成的图表,而应该将生成SVG文件的自动化过程放在服务器端而不是前端。
教程: http://bl.ocks.org/nbremer/21746a9668ffdf6d8242
教程: http://bl.ocks.org/nbremer/21746a9668ffdf6d8242
Result
是测试数据的数组。在实际应用中,它是由几个过程生成的,最后一步是制作子总计并从子总计生成SVG输出并将其发送给特定人员。<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Smoothed D3.js Radar Chart</title>
<script src="./d3.js" charset="utf-8"></script>
<style>
body {
font-family: 'Open Sans', sans-serif;
font-size: 11px;
font-weight: 300;
fill: #242424;
text-align: center;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
cursor: default;
}
.legend {
font-family: 'Raleway', sans-serif;
fill: #333333;
}
.tooltip {
fill: #333333;
}
</style>
</head>
<body>
<div class="radarChart"></div>
<a id="download" href="#">Download SVG</a>
<script src="radarChart.js"></script>
<script>
const result = [1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 0, 2, 1, 1, 2, 0, 0, 2, 1, 1, 2, 0, 0, 2, 1, 1, 2, 0, 0, 2, 1, 1, 2, 2, 0, 0];
var final = sort(result);
var margin = {
top: 100,
right: 100,
bottom: 100,
left: 100
},
width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);
var data = [
[
{
axis: "a",
value: final[0],
},
{
axis: "b",
value: final[1],
},
{
axis: "c",
value: final[2],
},
{
axis: "d",
value:final[3],
},
{
axis: "e",
value: final[4],
},
{
axis: "f",
value:final[5],
},
{
axis: "g",
value: final[6],
},
{
axis: "h",
value: final[7],
}
]
];
var color = d3.scale.ordinal()
.range(["#EDC951", "#CC333F", "#00A0B0"]);
var radarChartOptions = {
w: width,
h: height,
margin: margin,
maxValue: 0.5,
levels: 5,
roundStrokes: true,
color: color
};
function sort(result) {
var newr = [
[0],
[0],
[0],
[0],
[0],
[0],
[0],
[0]
];
var j = 0;
var p = 0;
for (var i = 0; i != 7; i++) {
var ip = 0;
for (var k = j; k != 7; k++) {
newr[ip].push(result[p]);
p++;
ip++
}
j++;
}
for (var i = 0; i != 7; i++) {
ip = i + 1;
for (var k = i + 1; k != 8; k++) {
newr[ip].unshift(result[p]);
p++;
ip++
}
}
return subtotall(newr);
}
function subtotall(newr) {
var total = [0, 0, 0, 0, 0, 0, 0, 0];
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
if (newr[i][j] == 1) {
total[i] = total[i] + 1;
}
}
}
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
if (newr[j][i] == 2) {
total[i] = total[i] + 1;
}
}
}
return total;
}
RadarChart(".radarChart", data, radarChartOptions);
var svg = d3.select(".radarChart svg")
.attr("id", "visualization")
.attr("xmlns", "http://www.w3.org/2000/svg");
d3.select("#download").on("click", function(){
d3.select(this)
.attr("href", 'data:application/octet-stream;base64,' + btoa(d3.select(".radarChart").html()))
.attr("download", "viz.svg")
})
</script>
</body>
</html>
我不是专业的编码人员,但我努力变得更好。