如何使用行和列以圆形方式表示数据
Posted
技术标签:
【中文标题】如何使用行和列以圆形方式表示数据【英文标题】：How to represent data circle wise using row and column 【发布时间】：2021-06-03 18:50:36 【问题描述】：我厌倦了按列表示数据行，例如附加图像。
条件：
当溢出列再按行表示时，在一列中表示类似旁边的数据， 当下一个数据超过列 Y 轴最大值和 X 轴表示时。 如果蓝色超过前一个 Y 轴值，然后是 X，然后是 Y这里是示例代码：Codesandbox.io 或
var data =
game_results: [
game_number: "1",
winner: "red"
,
game_number: "2",
winner: "red"
,
game_number: "3",
winner: "red"
,
game_number: "4",
winner: "red"
,
game_number: "5",
winner: "red"
,
game_number: "6",
winner: "red"
,
game_number: "7",
winner: "red"
,
game_number: "8",
winner: "red"
,
game_number: "9",
winner: "red"
,
game_number: "10",
winner: "red"
,
game_number: "11",
winner: "blue"
,
game_number: "12",
winner: "blue"
,
game_number: "13",
winner: "red"
,
game_number: "14",
winner: "red"
,
game_number: "15",
winner: "red"
,
game_number: "16",
winner: "blue"
,
game_number: "17",
winner: "blue"
,
game_number: "18",
winner: "blue"
,
game_number: "19",
winner: "blue"
,
game_number: "20",
winner: "blue"
,
game_number: "21",
winner: "blue"
,
game_number: "22",
winner: "red"
,
game_number: "23",
winner: "blue"
,
game_number: "24",
winner: "blue"
,
game_number: "25",
winner: "blue"
,
game_number: "26",
winner: "blue"
,
game_number: "27",
winner: "blue"
,
game_number: "28",
winner: "blue"
,
game_number: "30",
winner: "blue"
,
game_number: "31",
winner: "red"
,
game_number: "32",
winner: "red"
,
game_number: "33",
winner: "red"
,
game_number: "34",
winner: "red"
,
game_number: "35",
winner: "blue"
]
;
var width = 50,
height = 50;
var overflow1 = false;
var prevState = data.game_results[0].winner;
var regularx = 0,
regularY = 0,
x2 = 0,
y2 = 6,
xMax = 0;
console.log("result ", data.game_results.length);
for (i = 1; i <= data.game_results.length || 0; i++)
if (!(data.game_results[i - 1].winner == prevState))
prevState = data.game_results[i - 1].winner;
regularY = 0;
x2 += 1;
regularx = x2;
xMax += 1;
if (overflow1)
y2 -= 1;
var _top = regularY * height;
var _left = regularx * width;
if (regularx == 0)
_left = 0;
if (regularY == 0)
_top = 0;
if (overflow1)
overflow1 = false;
if (regularY == y2)
overflow1 = true;
regularY = y2 - 1;
regularx += 1;
_top = (y2 - 1) * height;
_left = regularx * width;
$(".box__inner").append(
'<div class="box '+ data.game_results[i - 1].winner+'" style="top:' +
_top +
"px; left:" +
_left +
"px; background: " + 'transparent'+
' "></div>'
);
regularY += 1;
*:before,
*:after,
*
box-sizing: border-box;
margin: 0;
padding: 0;
.box-outer
border: 1px solid #ddd;
overflow: auto;
.box__inner
height: 300px;
position: relative;
min-width: 100%;
background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk5RkVDODhBNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk5RkVDODhCNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTlGRUM4ODg3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTlGRUM4ODk3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAyADIDAREAAhEBAxEB/8QAWQABAQEAAAAAAAAAAAAAAAAAAAMIAQEAAAAAAAAAAAAAAAAAAAAAEAABBAAHAQEAAAAAAAAAAAAAAQIDBNGSslNzFDQRYREBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A0/Vq1XVYXOhYqqxqqqtT6q/E/AK9OpsR5W4AOnU2I8rcAHTqbEeVuADp1NiPK3AB06mxHlbgA6dTYjytwAU/JBxt0oBUAAAAAAEqfkg426UAqAAAAAACVPyQcbdKAVAAAAAABKn5IONulAKgAAAAAAlT8kHG3SgFQAAAAAASp+SDjbpQCoAAAAAAP//Z);
.box
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
border: 5px solid transparent;
.box:before,
.box:after
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
z-index: 1;
background: #fff;
.box:before
width: 45px;
height: 45px;
background: red
.box.red:before
background: red;
.box.blue:before
background: blue;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-outer">
<div class="box__inner">
<!-- <div class="box"></div> -->
</div>
</div>【问题讨论】：
对不起，我不明白你想要什么..不清楚.... 感谢 cmets @Frenchy，我正在尝试使用此对象数据布局附加图像 @Sayed 您能否将代码上传到实时编辑器，以便我们实施并与您分享。 @PalashKantiBachar 当然，请点击此链接：codesandbox.io/s/game-bubble-hu69j @Frenchy 我已经附加了一个输出图像并添加了数据/对象，如何使用这个数据/对象创建它。 【参考方案1】：这里我已经存储了访问过的坐标并检查了显示圆的路径
var data =
game_results: [
game_number: "1",
winner: "red"
,
game_number: "2",
winner: "red"
,
game_number: "3",
winner: "red"
,
game_number: "4",
winner: "red"
,
game_number: "5",
winner: "red"
,
game_number: "6",
winner: "red"
,
game_number: "7",
winner: "red"
,
game_number: "8",
winner: "red"
,
game_number: "9",
winner: "red"
,
game_number: "10",
winner: "red"
,
game_number: "11",
winner: "blue"
,
game_number: "12",
winner: "blue"
,
game_number: "13",
winner: "red"
,
game_number: "14",
winner: "red"
,
game_number: "15",
winner: "red"
,
game_number: "16",
winner: "blue"
,
game_number: "17",
winner: "blue"
,
game_number: "18",
winner: "blue"
,
game_number: "19",
winner: "blue"
,
game_number: "20",
winner: "blue"
,
game_number: "21",
winner: "blue"
,
game_number: "22",
winner: "red"
,
game_number: "23",
winner: "blue"
,
game_number: "24",
winner: "blue"
,
game_number: "25",
winner: "blue"
,
game_number: "26",
winner: "blue"
,
game_number: "27",
winner: "blue"
,
game_number: "28",
winner: "blue"
,
game_number: "30",
winner: "blue"
,
game_number: "31",
winner: "red"
,
game_number: "32",
winner: "red"
,
game_number: "33",
winner: "red"
,
game_number: "34",
winner: "red"
,
game_number: "35",
winner: "blue"
]
;
$(document).ready(async function ()
await renderGameObject();
);
var visitedDataSet = [];
async function renderGameObject()
var width = 50,
height = 50;
var regularx = 0,
ymax = 6;
let _yCord = -1;
let _xCord = 0;
let xCordCompleted = -1;
let previousColor = "";
//for loop to render the element
for (const r of data.game_results)
//Reset the color/state:
if (previousColor != r.winner)
previousColor = r.winner;
xCordCompleted = xCordCompleted + 1;
_yCord = -1;
_xCord = xCordCompleted;
//calculate that last position
if (_yCord === ymax - 1)
regularx += 1;
// _xCord = regularx;
_xCord = _xCord+1;
var cordinate = await checkAvailablePosition(_xCord, _yCord);
_xCord = cordinate.xCod;
_yCord = cordinate.yCod;
else
_yCord = _yCord + 1;
var cordinate1 = await checkAvailablePosition(_xCord, _yCord);
_xCord = cordinate1.xCod;
_yCord = cordinate1.yCod;
// stored the visited coordinate
visitedDataSet.push( x: _xCord, y: _yCord );
$(".box__inner").append(
'<div class="box ' +
r.winner +
'" style="top:' +
_yCord * width +
"px; left:" +
_xCord * height +
"px; background: " +
"transparent" +
' "></div>'
);
async function checkAvailablePosition(xCod, yCod)
let existingData =(await visitedDataSet.filter((r) => r.x === xCod && r.y === yCod)) || []; //check the cordinate is available or not
if (existingData.length > 0)
if (((await visitedDataSet.filter((r) => r.x === xCod + 1 && r.y === yCod)) || []).length > 0)
return xCod: xCod + 1, yCod: yCod - 1 ;
else
return xCod: xCod + 1, yCod: yCod ;
else
return xCod: xCod, yCod: yCod ;
*:before,
*:after,
*
box-sizing: border-box;
margin: 0;
padding: 0;
.box-outer
border: 1px solid #ddd;
overflow: auto;
.box__inner
height: 300px;
position: relative;
min-width: 100%;
background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk5RkVDODhBNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk5RkVDODhCNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTlGRUM4ODg3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTlGRUM4ODk3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAyADIDAREAAhEBAxEB/8QAWQABAQEAAAAAAAAAAAAAAAAAAAMIAQEAAAAAAAAAAAAAAAAAAAAAEAABBAAHAQEAAAAAAAAAAAAAAQIDBNGSslNzFDQRYREBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A0/Vq1XVYXOhYqqxqqqtT6q/E/AK9OpsR5W4AOnU2I8rcAHTqbEeVuADp1NiPK3AB06mxHlbgA6dTYjytwAU/JBxt0oBUAAAAAAEqfkg426UAqAAAAAACVPyQcbdKAVAAAAAABKn5IONulAKgAAAAAAlT8kHG3SgFQAAAAAASp+SDjbpQCoAAAAAAP//Z);
.box
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
border: 5px solid transparent;
.box:before,
.box:after
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
z-index: 1;
background: #fff;
.box:before
width: 45px;
height: 45px;
background: red
.box.red:before
background: red;
.box.blue:before
background: blue;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-outer">
<div class="box__inner">
<!-- <div class="box"></div> -->
</div>
</div>【讨论】：
@Md.AbuSayed 抱歉，但这个解决方案是错误的..没有相同的数据 @Frenchy 感谢 cmets，我已经更新了数据，并且工作正常。 没问题，我刚刚创建了一个本地的sn-p stakoverflow @PalashKantiBachar 对于随机更多数据无法正常工作 @Md.AbuSayed 您现在可以查看。希望它适用于所有数据。【参考方案2】：它不是解决方案，因为我不了解规则，但它有助于调试你有错误的地方
调试器！：
var data =
game_results: [
game_number: "1",
winner: "red"
,
game_number: "2",
winner: "red"
,
game_number: "3",
winner: "red"
,
game_number: "4",
winner: "red"
,
game_number: "5",
winner: "red"
,
game_number: "6",
winner: "red"
,
game_number: "7",
winner: "red"
,
game_number: "8",
winner: "red"
,
game_number: "9",
winner: "red"
,
game_number: "10",
winner: "red"
,
game_number: "11",
winner: "blue"
,
game_number: "12",
winner: "blue"
,
game_number: "13",
winner: "red"
,
game_number: "14",
winner: "red"
,
game_number: "15",
winner: "red"
,
game_number: "16",
winner: "blue"
,
game_number: "17",
winner: "blue"
,
game_number: "18",
winner: "blue"
,
game_number: "19",
winner: "blue"
,
game_number: "20",
winner: "blue"
,
game_number: "21",
winner: "blue"
,
game_number: "22",
winner: "red"
,
game_number: "23",
winner: "blue"
,
game_number: "24",
winner: "blue"
,
game_number: "25",
winner: "blue"
,
game_number: "26",
winner: "blue"
,
game_number: "27",
winner: "blue"
,
game_number: "28",
winner: "blue"
,
game_number: "30",
winner: "blue"
,
game_number: "31",
winner: "red"
,
game_number: "32",
winner: "red"
,
game_number: "33",
winner: "red"
,
game_number: "34",
winner: "red"
,
game_number: "35",
winner: "blue"
]
;
var width = 50,
height = 50;
var overflow1 = false;
var prevState = data.game_results[0].winner;
var regularx = 0,
regularY = 0,
x2 = 0,
y2 = 6,
xMax = 0;
console.log("result ", data.game_results.length);
for (i = 1; i <= data.game_results.length || 0; i++)
if (data.game_results[i - 1].winner != prevState)
prevState = data.game_results[i - 1].winner;
regularY = 0;
x2 += 1;
regularx = x2;
xMax += 1;
if (overflow1)
y2 -= 1;
var _top = regularY * height;
var _left = regularx * width;
if (regularx == 0)
_left = 0;
if (regularY == 0)
_top = 0;
if (overflow1)
overflow1 = false;
if (regularY == y2)
overflow1 = true;
regularY = y2 - 1;
regularx += 1;
_top = (y2 - 1) * height;
_left = regularx * width;
$(".box__inner").append(
'<div class="box ' + data.game_results[i - 1].winner + '" style="top:' +
_top +
"px; left:" +
_left +
"px; background: " + 'transparent' + ' ">' + i + '</div>'
);
regularY += 1;
*:before,
*:after,
*
box-sizing: border-box;
margin: 0;
padding: 0;
.box-outer
border: 1px solid #ddd;
overflow: auto;
.box__inner
height: 300px;
position: relative;
min-width: 100%;
background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk5RkVDODhBNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk5RkVDODhCNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTlGRUM4ODg3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTlGRUM4ODk3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAyADIDAREAAhEBAxEB/8QAWQABAQEAAAAAAAAAAAAAAAAAAAMIAQEAAAAAAAAAAAAAAAAAAAAAEAABBAAHAQEAAAAAAAAAAAAAAQIDBNGSslNzFDQRYREBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A0/Vq1XVYXOhYqqxqqqtT6q/E/AK9OpsR5W4AOnU2I8rcAHTqbEeVuADp1NiPK3AB06mxHlbgA6dTYjytwAU/JBxt0oBUAAAAAAEqfkg426UAqAAAAAACVPyQcbdKAVAAAAAABKn5IONulAKgAAAAAAlT8kHG3SgFQAAAAAASp+SDjbpQCoAAAAAAP//Z);
.box
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
border: 5px solid transparent;
.box:before,
.box:after
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
z-index: 1;
background: #fff;
.box:before
width: 25px;
height: 25px;
background: red
.box.red:before
background: red;
.box.blue:before
background: blue;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-outer">
<div class="box__inner">
<!-- <div class="box"></div> -->
</div>
</div>解决方案！
var data =
game_results: [
game_number: "1",
winner: "red"
,
game_number: "2",
winner: "red"
,
game_number: "3",
winner: "red"
,
game_number: "4",
winner: "red"
,
game_number: "5",
winner: "red"
,
game_number: "6",
winner: "red"
,
game_number: "7",
winner: "red"
,
game_number: "8",
winner: "red"
,
game_number: "9",
winner: "red"
,
game_number: "10",
winner: "red"
,
game_number: "11",
winner: "blue"
,
game_number: "12",
winner: "blue"
,
game_number: "13",
winner: "red"
,
game_number: "14",
winner: "red"
,
game_number: "15",
winner: "red"
,
game_number: "16",
winner: "blue"
,
game_number: "17",
winner: "blue"
,
game_number: "18",
winner: "blue"
,
game_number: "19",
winner: "blue"
,
game_number: "20",
winner: "blue"
,
game_number: "21",
winner: "blue"
,
game_number: "22",
winner: "red"
,
game_number: "23",
winner: "blue"
,
game_number: "24",
winner: "blue"
,
game_number: "25",
winner: "blue"
,
game_number: "26",
winner: "blue"
,
game_number: "27",
winner: "blue"
,
game_number: "28",
winner: "blue"
,
game_number: "30",
winner: "blue"
,
game_number: "31",
winner: "red"
,
game_number: "32",
winner: "red"
,
game_number: "33",
winner: "red"
,
game_number: "34",
winner: "red"
,
game_number: "35",
winner: "blue"
]
;
var width = 50,
height = 50;
var sameRow = -1;
var prevState = data.game_results[0].winner;
var regularX = 0,
regularY = 0,
yMax = 5,
xMax = 1;
console.log("result ", data.game_results.length);
for (var i = 0; i < data.game_results.length; i++)
if (data.game_results[i].winner != prevState)
prevState = data.game_results[i].winner;
sameRow = -1;
regularY = 0;
regularX = xMax++;
if (isBoxBusy(regularX, regularY))
sameRow = regularY - 1;
if (sameRow >= 0)
regularX++;
createBox(regularX, sameRow, width, height, data.game_results[i].winner);
continue;
else
createBox(regularX, regularY, width, height, data.game_results[i].winner);
//if (i == 34) break;
if (yMax != regularY)
regularY++;
else
regularX++;
function isBoxBusy(x, y)
return $(`div.box__inner .box[data-xy="$x,$y"]`).length;
function isSameColor(x, y, color)
return $(`div.box__inner .box[data-xy="$x,$y"]`).hasClass(color);
function createBox(x, y, w, h, color, i = "")
$(".box__inner").append(
`<div class="box $color" ` +
`data-xy = "$x,$y" ` +
`style="top:$y*hpx; left:$x*wpx; background: 'transparent'" >$i</div>`
);
*:before,
*:after,
*
box-sizing: border-box;
margin: 0;
padding: 0;
.box-outer
border: 1px solid #ddd;
overflow: auto;
.box__inner
height: 300px;
position: relative;
min-width: 100%;
background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk5RkVDODhBNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk5RkVDODhCNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTlGRUM4ODg3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTlGRUM4ODk3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAyADIDAREAAhEBAxEB/8QAWQABAQEAAAAAAAAAAAAAAAAAAAMIAQEAAAAAAAAAAAAAAAAAAAAAEAABBAAHAQEAAAAAAAAAAAAAAQIDBNGSslNzFDQRYREBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A0/Vq1XVYXOhYqqxqqqtT6q/E/AK9OpsR5W4AOnU2I8rcAHTqbEeVuADp1NiPK3AB06mxHlbgA6dTYjytwAU/JBxt0oBUAAAAAAEqfkg426UAqAAAAAACVPyQcbdKAVAAAAAABKn5IONulAKgAAAAAAlT8kHG3SgFQAAAAAASp+SDjbpQCoAAAAAAP//Z);
.box
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
border-radius: 50%;
background: #fff;
border: 5px solid transparent;
.box:before,
.box:after
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
z-index: 1;
background: #fff;
.box:before
width: 45px;
height: 45px;
background: red
.box.red:before
background: red;
.box.blue:before
background: blue;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-outer">
<div class="box__inner">
<!-- <div class="box"></div> -->
</div>
</div>【讨论】：
谢谢你的回答先生，但我已经创建了它。 @Md.AbuSayed 我想我有解决方案，太棒了.. Greate @Frenchy，非常感谢。以上是关于如何使用行和列以圆形方式表示数据的主要内容，如果未能解决你的问题，请参考以下文章
QTableWidget、Cellwidget、QLabel
如何以编程方式将组件分配给 Delphi GridPanel 行和列？