CSS 'height' 值向下而不是向上
CSS 'height' value going downwards instead of upwards
我正在使用 javascript 生成一个简单的条形图。我想让酒吧上升而不是下降。我该怎么做?
请注意,mainContainer 在 HTML 中引用了 div,而我只添加了带有 javascript 的样式。
var sampleData = [2, 8, 4, 5, 7, 3];
var mainContainer = document.querySelector(".graphite-container");
var addColumns = function(data) {
for (i = 0; i < data.length; i++) {
var column = document.createElement("div");
column.className = "graphite-column";
column.Id = 'column-' + (i + 1);
column.innerHTML = column.Id;
var columnValue = '';
columnValue += (data[i] * 25) + 'px';
$(column).css({
"display": "inline-block",
"height": columnValue,
"background-color": "blue"
});
$(mainContainer).append(column);
}
};
addColumns(sampleData);
您需要将 vertical-align:bottom;
设置为列。
var sampleData = [2, 8, 4, 5, 7, 3];
var mainContainer = document.querySelector(".graphite-container");
var addColumns = function(data) {
for (i = 0; i < data.length; i++) {
var column = document.createElement("div");
column.className = "graphite-column";
column.Id = 'column-' + (i + 1);
column.innerHTML = column.Id;
var columnValue = '';
columnValue += (data[i] * 25) + 'px';
$(column).css({
"display": "inline-block",
"height": columnValue,
"background-color": "blue",
"vertical-align": "bottom"
});
$(mainContainer).append(column);
}
};
addColumns(sampleData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graphite-container"></div>
你好。计算机显示器的原点是左上角。它不像您习惯的那样位于左下角。这可能是您问题的根本原因。这是算法错误而不是编程错误。
我正在使用 javascript 生成一个简单的条形图。我想让酒吧上升而不是下降。我该怎么做?
请注意,mainContainer 在 HTML 中引用了 div,而我只添加了带有 javascript 的样式。
var sampleData = [2, 8, 4, 5, 7, 3];
var mainContainer = document.querySelector(".graphite-container");
var addColumns = function(data) {
for (i = 0; i < data.length; i++) {
var column = document.createElement("div");
column.className = "graphite-column";
column.Id = 'column-' + (i + 1);
column.innerHTML = column.Id;
var columnValue = '';
columnValue += (data[i] * 25) + 'px';
$(column).css({
"display": "inline-block",
"height": columnValue,
"background-color": "blue"
});
$(mainContainer).append(column);
}
};
addColumns(sampleData);
您需要将 vertical-align:bottom;
设置为列。
var sampleData = [2, 8, 4, 5, 7, 3];
var mainContainer = document.querySelector(".graphite-container");
var addColumns = function(data) {
for (i = 0; i < data.length; i++) {
var column = document.createElement("div");
column.className = "graphite-column";
column.Id = 'column-' + (i + 1);
column.innerHTML = column.Id;
var columnValue = '';
columnValue += (data[i] * 25) + 'px';
$(column).css({
"display": "inline-block",
"height": columnValue,
"background-color": "blue",
"vertical-align": "bottom"
});
$(mainContainer).append(column);
}
};
addColumns(sampleData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graphite-container"></div>
你好。计算机显示器的原点是左上角。它不像您习惯的那样位于左下角。这可能是您问题的根本原因。这是算法错误而不是编程错误。