Fatal编程技术网
  • html/
  • Html Chart.js画布调整大小

Html Chart.js画布调整大小

html canvas chart.js

Html Chart.js画布调整大小,html,canvas,chart.js,Html,Canvas,Chart.js,在（）中，我发布了一个关于使用Graph.js库绘制图形的问题。 现在的问题是，如果我多次调用函数来绘制图形，画布每次都会调整大小。每次将图形重绘到同一画布时，其大小也会发生变化。 我还尝试设置画布的大小，但没有成功 原因可能是什么？为什么画布每次都会调整大小？我遇到了类似的问题，找到了您的答案。。我最终找到了解决办法 看起来Chart.js的源代码有以下内容（可能是因为它不应该在同一画布中重新呈现完全不同的图形）： 如果只调用一次就可以了，但是当您多次重画时，最终会多次更改canvas DOM

在（）中，我发布了一个关于使用Graph.js库绘制图形的问题。 现在的问题是，如果我多次调用函数来绘制图形，画布每次都会调整大小。每次将图形重绘到同一画布时，其大小也会发生变化。 我还尝试设置画布的大小，但没有成功

原因可能是什么？为什么画布每次都会调整大小？

我遇到了类似的问题，找到了您的答案。。我最终找到了解决办法

看起来Chart.js的源代码有以下内容（可能是因为它不应该在同一画布中重新呈现完全不同的图形）：

如果只调用一次就可以了，但是当您多次重画时，最终会多次更改canvas DOM元素的大小，从而导致重新调整大小

希望有帮助

调用时，Chart.js会将画布的大小乘以，然后尝试使用CSS将其缩小，目的是为高dpi设备提供更高分辨率的图形

问题是它没有意识到它已经做到了这一点，所以当调用连续时间时，它会再次乘以已经（翻倍或其他）的大小，直到事情开始破裂。（实际发生的情况是，它通过更改宽度和高度的DOM属性来检查是否应该向画布添加更多像素，如果应该，将其乘以某个因子（通常为2），然后更改该因子，然后更改css样式属性以保持页面上的相同大小。）

例如，当您运行一次并且画布宽度和高度设置为300时，它会将它们设置为600，然后将“样式”属性更改为300。。。但是如果您再次运行它，它会看到DOM的宽度和高度是600（检查这个问题的另一个答案以了解原因），然后将其设置为1200，将css的宽度和高度设置为600

这不是最优雅的解决方案，但我在保持视网膜设备的增强分辨率的同时解决了这个问题，只需在每次连续调用Chart.js之前手动设置画布的宽度和高度

var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
正如jcmiller11所建议的，设置宽度和高度会有所帮助。 一个稍微好一点的解决方案是在绘制图表之前检索画布的宽度和高度。 然后使用这些数字在随后每次重新绘制图表时设置图表。 这确保javascript代码中没有常量

ctx.canvas.originalwidth = ctx.canvas.width;
ctx.canvas.originalheight = ctx.canvas.height;

function drawchart() {
    ctx.canvas.width = ctx.canvas.originalwidth;
    ctx.canvas.height = ctx.canvas.originalheight;

    var chartctx = new Chart(ctx);
    myNewBarChart = chartctx.Bar(data, chartSettings); 
}
我对此有很多问题，因为在所有这些之后，当鼠标悬停时，我的线条图形看起来很糟糕，我找到了一种更简单的方法，希望它能有所帮助：）

使用以下Chart.js选项：

// Boolean - whether or not the chart should be responsive and resize when the browser does.

responsive: true,

// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container

maintainAspectRatio: false,
在IOS和Android中，当您滚动时，浏览器会隐藏工具栏，从而更改窗口的大小，从而调整图表大小。 解决方案是保持纵横比

var options = { 
    responsive: true,
    maintainAspectRatio: true
}
这应该可以解决您的问题。

这对我很有用：

 let canvasBox = ReactDOM.findDOMNode(this.refs.canvasBox);
 let width = canvasBox.clientWidth;
 let height = canvasBox.clientHeight;
 let charts = ReactDOM.findDOMNode(this.refs.charts);
 let ctx = charts.getContext('2d');
 ctx.canvas.width = width;
 ctx.canvas.height = height;
 this.myChart = new Chart(ctx);

<body>
    <form>
        [...]
        <div style="position:absolute; top:60px; left:10px; width:500px; height:500px;">
            <canvas id="cv_values"></canvas>

            <script type="text/javascript">
                var indicatedValueData = {
                    labels: ["1", "2", "3"],
                    datasets: [
                        {
                            [...]
                        };

                var cv_values = document.getElementById("cv_values").getContext("2d");
                var myChart = new Chart(cv_values, { type: "line", data: indicatedValueData });
            </script>
        </div>
    </form>
</body>


[...]
var指示值数据={
标签：[“1”、“2”、“3”]，
数据集：[
{
[...]
};
var cv_values=document.getElementById（“cv_values”）.getContext（“2d”）；
var myChart=新图表（cv_值，{type:“line”，数据：indicatedValueData}）；
基本事实是，我们必须在div标记中设置画布的大小。

我在使用Angular CLI时遇到了类似的缩放问题。通过从index.html中删除这一行，我们可以使其正常工作：

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
：mikebarr58

如果有人遇到问题，我找到了一个解决方案，它不会牺牲响应能力等

在调用图表构造函数之前，只需将画布包装在一个div容器中（无样式），并将div的内容重置为一个ID为的空画布

例如：

HTML:
JS:

$（“#chartContainer”）.html（“”）；
//像往常一样调用new Chart（）
我不得不在这里结合使用多个答案，并做了一些小调整

首先，有必要将canvas元素包装在块级容器中。我告诉你，不要让canvas元素有任何兄弟姐妹；让它成为一个孤独的孩子，因为它是顽固和被宠坏的。（包装可能不需要任何尺寸限制，但为了安全起见，最好对其应用最大高度。）

在确保满足之前的条件后，启动图表时，确保使用以下选项：

var options = { 
    "responsive": true,
    "maintainAspectRatio": false
}
如果要调整图表的高度，请在画布元素级别进行调整

<canvas height="500"></canvas>
不要试图以任何其他方式处理孩子。这应该会产生一个令人满意的、布局合理的图表，一个可以平静地留在婴儿床中的图表。

我尝试使用jQuery调整画布大小，但效果不太好。我认为CSS3是最好的选择，如果你想在一定程度上进行悬停缩放的话

其他代码平移链接中的以下悬停选项：

.style_prevu_kit:hover{
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
}
请点击我的codepan链接：

.style_prevu_kit:hover{
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
}

添加
div
，它将解决问题

我遇到了同样的问题。我可以通过设置选项来解决它：

responsive:false，
维护Aspectratio：是的，

showScale:false，
以下是官方声明：

无法直接从canvas元素检测画布大小更改的时间。Chart.js使用其父容器更新画布渲染和显示大小。但是，此方法要求容器相对定位并仅专用于图表画布。然后可以通过设置相对值来实现响应对于容器大小（示例）：

我在这个帖子上尝试了多个答案，对我有效的是（注意我使用的是react） 
var options = { 
    "responsive": true,
    "maintainAspectRatio": false
}

<canvas height="500"></canvas>

.style_prevu_kit:hover{
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
}

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

componentDidUpdate(prevProps: ChartProps) { if(prevProps.data !== props.data) renderChart(); }