如何使Chart.js条形图留在原处
威尔
我是chart.js的新手，在将它渲染到我想要的空间时遇到了问题。简而言之，我希望它在指定的区域内有其他想法。
当我渲染它时，它占用的垂直空间比我想要的还要多，并且将重要信息推送到屏幕之外。由于这是墙板，因此“屏幕外”是不允许的。
如何强制图表仅在允许的空间中呈现？
[编辑]屏幕截图的基本html / js如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Wallboard</title>
<style>
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
nav ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input, select {
vertical-align: middle;
}
.stat-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.stat-left,.stat-right {
display: flex;
flex-direction: column;
width:70vw;
border:0px solid #000000;
}
.stat-right {width:29vw;}
.stat-bubble {
border:2px solid #000000;
border-radius: 15px;
width:24vw;
text-align:center;
vertical-align:bottom;
position:relative;
margin:0.25vw;
}
.stat-bubble-title {
border:1px solid #000000;
border-radius: 15px;
font-size:1vw;
font-family:Tahoma, Verdana, Arial;
font-weight:bold;
color:#000000;
background-color:#FFFF00;
text-align:center;
vertical-align:text-bottom;
margin-top:5px;
margin-left:5%;
width:90%;
}
.stat-bubble-content {
width:100%;
font-size:5vw;
}
#sb0, #sb17 {
width:36vw;
}
#sb1 {
width:9.5vw;
}
#sb2,#sb3,#sb4,#sb5,#sb6,#sb7 {
width:10vw;
}
#sb8,#sb9,#sb10,#sb11,#sb23,#sb18,#sb19,#sb20,#sb21,#sb22 {
width:19vw;
}
</style>
<script src="js/Chart.js"></script>
<script type="text/javascript" language="javascript1.4">
function fLoad() {
fDrawAgentChart();
fDrawCallChart();
}
function fDrawAgentChart() {
var ctx = document.getElementById('canAgentBD').getContext('2d');
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Working', 'Reserved', 'Talking', 'Ready', 'Not Ready'],
datasets: [{
label: '# of Agents',
data: [1, 0, 1, 0, 2],
backgroundColor: [
'#0000FF',
'#660099',
'#FFCC00',
'#00FF00',
'#FF0000'
],
borderWidth: 3
}]
},
options: {
cutoutPercentage : 65,
legend: {
display: true,
position: 'right',
align: 'start',
labels: {
boxWidth: 10,
fontColor: '#333333'
}
}
}
});
}
function fDrawCallChart() {
var ctx = document.getElementById('canCallVol').getContext('2d');
ctx.height = 200;
var myDoughnutChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['00', '01', '02', '03', '04', '05',
'06', '07', '08', '09', '10', '11',
'12', '13', '14', '15', '16', '17',
'18', '19', '20', '21', '22', '23'],
datasets: [{
label: '# of Calls',
barPercentage: 1,
barThickness: 3,
maxBarThickness: 5,
minBarLength: 1,
data: [1,2,0,1,0,0,0,8,16,23,22,15,4,0,0,0,0,0,0,0,0,0,0,0],
backgroundColor: [
'#00FF00','#00FF00','#00FF00','#00FF00','#00FF00','#00FF00',
'#00FF00','#00FF00','#00FF00','#00FF00','#00FF00','#00FF00',
'#00FF00','#00FF00','#00FF00','#00FF00','#00FF00','#00FF00',
'#00FF00','#00FF00','#00FF00','#00FF00','#00FF00','#00FF00'
]
}]
},
options: {
scales: {
xAxes: [{
gridLines: {
offsetGridLines: false
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 5
},
gridLines: {
offsetGridLines: false
}
}]
},
legend: {
display: false
}
}
});
}
</script>
</head>
<body onLoad="fLoad()">
<div class="stat-list">
<div id="agentWall" class="stat-left">
<div class="stat-list">
<div id="sb0" class="stat-bubble"><div id="sbt0" class="stat-bubble-title">Stats </div><div id="sbc0" class="stat-bubble-content">Help Desk</div></div>
<div id="sb2" class="stat-bubble"><div id="sbt2" class="stat-bubble-title">Agents LoggedIn</div><div id="sbc2" class="stat-bubble-content">4</div></div>
<div id="sb3" class="stat-bubble"><div id="sbt3" class="stat-bubble-title">Agents Working </div><div id="sbc3" class="stat-bubble-content">1</div></div>
<div id="sb4" class="stat-bubble"><div id="sbt4" class="stat-bubble-title">Agents Reserved</div><div id="sbc4" class="stat-bubble-content">0</div></div>
<div id="sb17" class="stat-bubble"><div id="sbt17" class="stat-bubble-title">Timeframe </div><div id="sbc17" class="stat-bubble-content">0 12:28:12</div></div>
<div id="sb5" class="stat-bubble"><div id="sbt5" class="stat-bubble-title">Agents Talking </div><div id="sbc5" class="stat-bubble-content">1</div></div>
<div id="sb6" class="stat-bubble"><div id="sbt6" class="stat-bubble-title">Available </div><div id="sbc6" class="stat-bubble-content">0</div></div>
<div id="sb7" class="stat-bubble"><div id="sbt7" class="stat-bubble-title">Unavailable </div><div id="sbc7" class="stat-bubble-content">2</div></div>
</div>
<div id="callChart">
<canvas id="canCallVol"></canvas>
</div>
</div>
<div id="agentChart" class="stat-right">
<canvas id="canAgentBD" width="100%" height="100%"></canvas>
</div>
</div>
<!-- calls -->
<div class="stat-list">
<div id="sb8" class="stat-bubble"><div id="sbt8" class="stat-bubble-title">Total Calls </div><div id="sbc8" class="stat-bubble-content">84</div></div>
<div id="sb9" class="stat-bubble"><div id="sbt9" class="stat-bubble-title">Waiting Calls </div><div id="sbc9" class="stat-bubble-content">0</div></div>
<div id="sb10" class="stat-bubble"><div id="sbt10" class="stat-bubble-title">Handled Calls </div><div id="sbc10" class="stat-bubble-content">57</div></div>
<div id="sb11" class="stat-bubble"><div id="sbt11" class="stat-bubble-title">Abandoned Calls</div><div id="sbc11" class="stat-bubble-content">23</div></div>
<div id="sb23" class="stat-bubble"><div id="sbt23" class="stat-bubble-title">Dequeued Calls </div><div id="sbc23" class="stat-bubble-content">4</div></div>
<div id="sb18" class="stat-bubble"><div id="sbt18" class="stat-bubble-title">CAvgTalkTime </div><div id="sbc18" class="stat-bubble-content">0:08:06</div></div>
<div id="sb19" class="stat-bubble"><div id="sbt19" class="stat-bubble-title">CAvgWaitTime </div><div id="sbc19" class="stat-bubble-content">0:03:21</div></div>
<div id="sb20" class="stat-bubble"><div id="sbt20" class="stat-bubble-title">CLongestTalk </div><div id="sbc20" class="stat-bubble-content">1:06:01</div></div>
<div id="sb21" class="stat-bubble"><div id="sbt21" class="stat-bubble-title">CLongestWait </div><div id="sbc21" class="stat-bubble-content">0:18:11</div></div>
<div id="sb22" class="stat-bubble"><div id="sbt22" class="stat-bubble-title">COldestContact </div><div id="sbc22" class="stat-bubble-content">0:00:00</div></div>
</div>
</body>
</html>
JDE10
您需要将图表设置为禁用“保持纵横比”选项，如下所示：
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
...
},
options: {
maintainAspectRatio: false,
}
});
然后您可以直接设置元素的高度：
ctx.height = 200;
以像素为单位。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
构建类似于Jarvis的本地语言应用程序
- 2
在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？
- 3
Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用
- 4
SQL Server中的非确定性数据类型
- 5
使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中
- 6
Swift 2.1-对单个单元格使用UITableView
- 7
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 8
HttpClient中的角度变化检测
- 9
如何了解DFT结果
- 10
错误：找不到存根。请确保已调用spring-cloud-contract：convert
- 11
Embers js中的更改侦听器上的组合框
- 12
在Wagtail管理员中，如何禁用图像和文档的摘要项？
- 13
如何避免每次重新编译所有文件？
- 14
Java中的循环开关案例
- 15
ng升级性能注意事项
- 16
Swift中的指针替代品？
- 17
如何使用geoChoroplethChart和dc.js在Mapchart的路径上添加标签或自定义值？
- 18
使用分隔符将成对相邻的数组元素相互连接
- 19
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
- 20
ggplot：对齐多个分面图-所有大小不同的分面
- 21
完全禁用暂停（在内核级别？-必须与使用的DE和登录状态无关！）
我来说两句