Я использовал следующий урок D3js , чтобы сгенерировать свой предпочтительный график.но мне пришлось открыть HTML файл для генерируемой диаграммы, вместо этого он должен быть частью автоматизированного процесса генерации SVG файла на на стороне сервера вместо передний конец * * +1010.
Учебник: 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>
Я не профессиональный кодер, но я стараюсь быть лучше.