Question

抱歉，如果我错过任何解决问题的方法，我已经阅读并尝试了许多解决方案，而且没有任何解决方案适应问题。

我在一个页面上有几个图表（来自chart.js），但我无法成功地使它们响应，尽管：

responsive: true,

我可以获得的最佳响应显示是在放大画布宽度和高度时，但桌面版图表显示在整个屏幕上。

这是fiddle.net

有人帮我吗？非常感谢你。

Answer 1

答案是：

<强> 1。在画布周围添加div

例如：

http://example.com/api/products/

<强> 2。将高度添加到css中的div类

<div class="wrapper">
    <canvas width="600" height="250"></canvas>
</div>

（根据您的意愿调整高度）

Answer 2

Bootstrap有一个示例页面，它有一个响应的图表（使用chartjs）。所以，我想指出那个可以下载的URL，我们有一个响应式图表。

Dasbhoard Example showing Reponsive Chart

Answer 3

正如我在小提琴中看到的那样，你给画布标签指定了固定的高度和宽度。

尝试为canvas标记提供70％或80％的高度和宽度。这可以解决您的问题。

100％可能会给出完整的大图表，但试图将它们限制在70到80之间。

Answer 4

您可以使用CSS使容器div响应并生成svg width: 100%和height:100%

这是更新的小提琴fiddle.net

Answer 5

我发现使用Chart.js，你需要一个包含div来操纵css（高度/宽度），这将有助于响应 - 但不完全。特别是宽度存在一些约束，因为包含div可能会在底部/侧面留下大量空白，因为画布不会完全调整为包含宽度的百分比。它并不完美，但它确实有效。

所以，作为一个解决方案：为每个图表创建一个包含div，并使用CSS样式为此div放置它：）

Answer 6

我也遇到类似的情况，基于chartjs documentation，我不得不在responsive: true部分中添加options，但这并不能解决我的问题！最后，我注意到canvas的父元素是flexbox！删除那解决了我的问题！

P.S官方文档说，向画布标签添加一些样式或宽度/高度属性是无效的！以下是来自文档的摘录

以下示例不起作用：

<canvas height="40vh" width="80vw">：无效值，画布   不调整大小（例如）<canvas style="height:40vh; width:80vw">：   无效行为，画布已调整大小，但变得模糊

希望我的回答可以帮助某人！

Answer 7

我知道这是一篇旧文章，但是最近才发现它。

请检查 https://www.chartjs.org/docs/latest/general/responsive.html#important-note

基本上说，

无法直接从canvas元素确定画布大小更改的时间。 Chart.js使用其父容器更新画布渲染和显示大小。但是，此方法要求容器相对放置并且仅专用于图表画布。然后可以通过设置容器大小的相对值来实现响应。”
请注意，为了使上面的代码正确地调整图表高度的大小，还必须将maintainAspectRatio选项设置为false。”

例如，

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

Answer 8

由于无法使用媒体查询来设置width和height，我通过检测移动设备或桌面设备来设置width和height属性，如下所示

HTML

<canvas id="chart" width="{{width}}" height="{{height}}"></canvas>

javascript-angularjs

$scope.width = '';
$scope.height = '120';
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
   $scope.width = '100';
   $scope.height = '100';
}

Answer 9

通过设置样式，而不是设置height和width属性：

代替

<canvas id="myChart" width="400" height="100"></canvas>

这样做

<canvas id="myChart" style="height: 20rem"></canvas>

Answer 10

我尝试了所有文件所说的内容，但是没有机会，所以我自己管理：

func main() {
    c := colly.NewCollector(
        colly.AllowedDomains( "www.coursera.org"),
        colly.Async(true),
    )

    c.Limit(&colly.LimitRule{
        DomainGlob: "*",
         Parallelism: 2,
    })

    c.OnHTML("a[href]", func(e *colly.HTMLElement) {
        link := e.Attr("href")
        e.Request.Visit(link)
    })
    pageCount :=0
    c.OnRequest(func(r *colly.Request) {
        r.Ctx.Put("url", r.URL.String())
    })

    // Set error handler
    c.OnError(func(r *colly.Response, err error) {
        log.Println("Request URL:", r.Request.URL, "failed with response:", r, "\nError:", err)
    })

    // Print the response
    c.OnResponse(func(r *colly.Response) {
        pageCount++
        urlVisited := r.Ctx.Get("url")
        log.Println(fmt.Sprintf("%d  DONE Visiting : %s", pageCount, urlVisited))
    })

    baseUrl := "https://www.coursera.org"
    c.Visit(baseUrl)
    c.Wait()
}

这里的想法是在调整窗口大小时更改宽度或高度或两者。

Answer 11

maintainAspectRatio: false使我解决了类似的问题。默认值为true。

Answer 12

from chart.js

<块引用>

然后可以通过设置相对值来实现响应容器大小：

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

图表也可以通过修改容器大小：chart.canvas.parentNode.style.height = '128px';

无法使图表js响应

12 个答案: