Snap.svg Test

by cx20

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>

JavaScript

const columns = ["2006年", "2007年", "2008年", "2009年", "2010年", "2011年"];
const dataSets = [
{label:"A地域", color:"#00f", values:[933, 501, 796, 969 , 998, 1150]},
{label:"B地域", color:"#f00", values:[801, 453, 719, 952, 1011, 1231]}
]
let svg = Snap(640, 480);
drawColumns(svg, columns);
drawTable(svg, dataSets);
drawGraph(svg);
plotData(svg, dataSets);

function drawColumns(svg, columns) {
    for (let i = 0; i < columns.length; i++) {
        svg.rect(60 + i * 60, 200 + 30, 60, 30).attr({
            stroke: "#777",
            strokeWidth: 2,
            fill: "none"
        });
        svg.text(65 + i * 60, 220 + 30, columns[i]);
    }
}

function drawTable(svg, dataSets) {
    for (let i = 0; i < dataSets.length; i++) {
        let data = dataSets[i];
        svg.rect(60 - 60, 200 + 60 + i * 30, 60, 30).attr({
            stroke: "#777",
            strokeWidth: 2,
            fill: "none"
        });
        svg.text(65 - 60, 220 + 60 + i * 30, data.label);
        for (let j = 0; j < data.values.length; j++) {
            svg.rect(60 + j * 60, 200 + 60 + i * 30, 60, 30).attr({
                stroke: "#777",
                strokeWidth: 2,
                fill: "none"
            });
            svg.text(65 + j * 60, 220 + 60 + i * 30, data.values[j]);
        }
    }
}

function drawGraph(svg) {
    for (let i = 0; i < 8; i++) {
        let x1 = 55;
        let y1 = i * 30 + 20;
        let x2 = 420;
        let y2 = i * 30 + 20;
        svg.line(x1, y1, x2, y2).attr({
            stroke: "#777",
            strokeWidth: 1
        });
        svg.text(x1 - 50, y1, String((7 - i) * 200));
    }
    svg.line(60, 20, 60, 230).attr({
        stroke: "#777",
        strokeWidth: 1
    });
}

function plotData(svg, dataSets) {
    for (let i = 0; i < dataSets.length; i++) {
        let data = dataSets[i];
        let graphData = [];
        for (let j = 0; j < data.values.length; j++) {
            graphData.push(60 + 30 + j * 60);
            graphData.push(230 -...