javascript - 可视化包含 XY 坐标位置的 JSON 数据

Question

我有 JSON 数据，其中包括 X-Y 网格位置、数量和颜色。

[{"x":1,"y":2,"qty":5,"color":"red"},
 {"x":2,"y":4,"qty":10,"color":"green"},
 {"x":3,"y":1,"qty":15,"color":"green"},
 {"x":4,"y":3,"qty":20,"color":"red"}]

我想像这样可视化 JSON:

我优先选择使用 Google Visualization API 中的某些内容，但我也愿意接受其他解决方案。我对 Javascript 非常熟悉，但想要一些即插即用的东西。

关于从哪里开始有什么想法吗？

一如既往地感谢!

Answer 1

我的解决方案不是很优雅，但这个想法只是为了展示如何使用基本的 Javascript，无需额外的库，只需一点 CSS 即可实现此目的。我添加了几个带有蓝色背景的附加值来测试附加数据。您可以使用额外的 CSS 使其看起来更好 - 并扩展此处的功能集，但只是想添加一些可以在图像中重现图表的内容。

var data = [{"x":1,"y":2,"qty":5,"color":"red"},
{"x":2,"y":4,"qty":10,"color":"green"},
//{"x":1,"y":4,"qty":8,"color":"blue"},
{"x":3,"y":1,"qty":15,"color":"green"},
//{"x":3,"y":2,"qty":77,"color":"purple"},
//{"x":5,"y":3,"qty":66,"color":"purple"},
//{"x":2,"y":1,"qty":22,"color":"blue"},
{"x":4,"y":3,"qty":20,"color":"red"}];

var chart = document.getElementById('chart');

var rows = 0;
var cols = 0;

// loop through and figure out how many rows and columns we will have
for (var i = 0; i < data.length; i++) {
 if (data[i].x > rows) rows = data[i].x;
 if (data[i].y > cols) cols = data[i].y;
 if (rows > cols) cols = rows;
 if (cols > rows) rows = cols;
 yCt = rows;
}


drawChart(rows,cols);

function drawChart(rows,cols) {
  var e = 0;
  var f = 0;

  while (e < rows) {
  
    var square = '<div class="square"><div class="header">'+yCt+'</div></div>';
    yCt--;
    chart.innerHTML = chart.innerHTML + square;
    addColumn(e); 
    e++;
  }
     if ( e == rows ) {
     addHeader()
     addValues()
    }
}
 
function addHeader() {
  var sq = document.getElementsByClassName('squareCol');
  var ct = 0;  
   for (var i = 0; i < sq.length; i++) {
     var element = sq[i];
  
    if (element.getAttribute('data-y') == 1) {
     ct++;
     var heading = document.getElementById('heading');
     heading.innerHTML = heading.innerHTML  + '<div class="headerCol">'+ct+'</div>';
   }
  }
}

function addColumn(rowNumber) {
  var row = document.getElementsByClassName('square')[rowNumber]
  for (var i = 0; i < cols; i++) {

     var x = i +1;
     var y = rows - (rowNumber);

     var squareCol = '<div class="squareCol" data-x="'+x+'" data-y="'+y+'"></div>';
     row.innerHTML =  row.innerHTML + squareCol;
  }
}
 

 
function addValues() {
 for (var i = 0; i < data.length; i++) {
   var xVal = data[i].x;
   var yVal = data[i].y;
   var qty = data[i].qty;
   var color = data[i].color;
   var squares = document.getElementsByClassName('squareCol')
 
   for (var j = 0; j < squares.length; j++) {
     var element = squares[j];
     if (element.getAttribute('data-x') == xVal && element.getAttribute('data-y') == yVal) {
       element.innerHTML = '<div class="qty"><div class="inner">'+qty+'</div></div>'
       element.className += ' '+ color;
     }
   
   } // end loop squares
 }
 }

#heading {
  position:absolute;
  margin-bottom:150px;
  margin-left:100px;
  width: 100%;
}

.header {
  position:absolute;
  line-height:4;
  vertical-align:text-bottom;
  text-align: center;
  margin-left:-50px;
  font-family:arial;
  font-size:1.2rem;  
  font-weight:bold;
}

.headerCol {
  display:inline-block;
  border-width: 0;
  line-height:3;
  text-align: center;
  font-family:arial;
  font-size:1.2rem;  
  width: 50px;
  font-weight:bold;
}

.square {
  height: 50px;
}

.qty {
   position: relative;
  text-align:center;
  line-height:3;
}
.inner {
  position:absolute;
  text-align:center;
  margin:0;
  width: 100%;
}
.squareCol {
  width: 50px;
  height: 50px;
  box-shadow: inset 0 0 0 1px black;
  display:inline-block;
  font-family:arial;
  font-size:1.2rem;
  font-weight:bold;
}

#chart {
  width: 600px;
  margin-left:100px;
}

.blue {
  background-color: lightblue;
}

.green {
  background-color: #92D050;
}

.red {
 background-color: #FF0000;
}

.purple {
 background-color: violet;
}

<div id="chart"></div>
<div id="heading"></div>