gpt4 book ai didi

angular - chartjs 高度不跟随父容器

转载 作者:行者123 更新时间:2023-12-03 23:54:20 25 4
gpt4 key购买 nike

注意:我已经修复了问题 #2,这是错误的数据。我仍然面临问题#1。
我有以下折线图配置。我的数据集示例数据是

{x:'29/01/2017',y:'0.00234'}

options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
type: 'time',
time: {
format: 'DD/MM/YYYY'
}
}]
}
}

另外,我有 html(我使用 angular flex-layout)和 typescript :
<div fxFlex style="height: 100%">
<div id="graph">
<canvas id="canvasGraph">{{chart}}</canvas>
</div>
</div>

// Hoping I can change the size of canvas to be the same as the parent
const canvas = <HTMLCanvasElement>document.getElementById('canvasGraph');
canvas.width = document.getElementById('graph').offsetWidth;
canvas.height = document.getElementById('graph').offsetHeight;

我有 2 个(现在只剩下 1 个)问题:
  • 最外面的 div 高度是 100%。但是不知什么原因,id="graph"的高度变成了150,而canvas也是150,不知道这150是从哪里来的。
  • 数据显示在图表上,然而,它们都在最右侧杂乱无章,我的 x 轴值从 1973 年到 2016 年。但我的数据只有 2017 年。我尝试更改“边界”和“刻度线”。源”属性,但什么也没有发生。
    (我更新了标题,因为我已经解决了这个问题,这是由错误的数据引起的)
  • 最佳答案

    我终于解决了我的问题。现在图表是响应式的。

    #graph{
    position: relative;
    height: 100%;
    width: 100% !important;
    }

    canvas {
    width: 100% !important;
    }

    关于angular - chartjs 高度不跟随父容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51552672/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com