chart.js - 此图上的画布折线图超出指定长度
问题描述
为什么此图上的折线图会超出指定的长度。在这个演示中,我有一个折线图,虽然我将画布高度设置为 250,但它的高度自动增长到 2355。如何控制折线图的高度?谢谢你。
JS:
var ctx2 = document.getElementById('lineChart').getContext('2d');
var lineChart = new Chart(ctx2, {
type: "line",
data: {
labels: [500, 600, 700, 750, 800, 850, 900, 950, 999, 050],
datasets: [
{
data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
label: "Infrastructure",
borderColor: "#3e95cd",
fill: false
},
{
data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
label: "CSI",
borderColor: "#8e5ea2",
fill: false
},
{
data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
label: "DevOps",
borderColor: "#3cba9f",
fill: false
},
{
data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
label: "Enterprise SIEM",
borderColor: "#e8c3b9",
fill: false
},
{
data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
label: "Bug Fix/Feature Request",
borderColor: "#c45850",
fill: false
}
]
},
options: {
title: {
display: true,
text: "Ticket Trends"
}
}
});
解决方案
添加 !important 属性
#barChart{
height: 250px !important;
width: 250px !important;
}
推荐阅读
- javascript - 如何禁用页面加载?
- serverless-framework - 在无服务器框架中找不到满足声明的有效选项
- nativescript - saveToFile 未将图像显示到图库中
- c# - ASP.NET Core 防止 api 路由的 spa-fallback 路由
- reactjs - 如何使用来自另一个组件的变量(保存为字符串的 URL)?
- php - wp_destroy_current_session() 是否也会以正确的方式处理 woocommerce 会话?
- html - 使用CSS在类中将内容居中对齐?
- javascript - 在同一页面上动态显示不同地区的多种货币价格
- php - Laravel Telescope 没有在配置文件夹中添加望远镜.php
- python-3.x - MacOS 上 python-crfsuite 的安装错误