當我使用圖表 div 的樣式屬性設置高度時，HorizontalBar 圖表顯示在畫布下方（Chart.js 2.9.4）
[英]HorizontalBar chart is displayed below canvas when I set height with style attribute for chart div (Chart.js 2.9.4)
問題描述
如果我使用樣式屬性為圖表 div 設置高度
<div id="chartDiv" style="height: 100px; border: 1px solid red;"><canvas id="chart"></canvas></div>
圖表看起來像這樣（圖表顯示在畫布下方）：
var barChartData = { labels: [""], datasets: [{ label: "1", backgroundColor: "rgba(68,222,166,1)", barThickness: 50, data: [177] }, { label: "2", barThickness: 50, backgroundColor: "rgba(218, 65, 102, 1)", data: [170] } ] }; var optionsBar = { legend: false, title: { display: false }, scales: { xAxes: [{ stacked: true, display: false }], yAxes: [{ stacked: true, display: false }] } }; var ctx = document.getElementById("chart"); var myChart = new Chart(ctx, { type: 'horizontalBar', data: barChartData, options: optionsBar });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script> <body style="background-color: grey;"> <div id="chartDiv" style="height: 100px; border: 1px solid red;"><canvas id="chart"></canvas></div> </body>
如何解決？
1 個解決方案
解決方案1
0 已采納 2020-11-17 17:27:10
它顯示為這樣是因為畫布的縱橫比會隨着窗口大小自動變化，但您已將 div 設置為特定高度100px 。 這就是為什么畫布在窗口大小擴展時放置在 div 之外的原因。 只是為了擺脫這個問題，以這種方式在您的選項中設置maintainAspectRatio: false ：
var barChartData = { labels: [""], datasets: [{ label: "1", backgroundColor: "rgba(68,222,166,1)", barThickness: 50, data: [177] }, { label: "2", barThickness: 50, backgroundColor: "rgba(218, 65, 102, 1)", data: [170] } ] }; var optionsBar = { maintainAspectRatio: false, legend: false, title: { display: false }, scales: { xAxes: [{ stacked: true, display: false }], yAxes: [{ stacked: true, display: false }] } }; var ctx = document.getElementById("chart"); var myChart = new Chart(ctx, { type: 'horizontalBar', data: barChartData, options: optionsBar });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script> <body style="background-color: grey;"> <div id="chartDiv" style="height: 100px; border: 1px solid red;"><canvas id="chart"></canvas></div> </body>
在 v2.9.4 中使用 chart.js 將鼠標懸停在圖表上時移動垂直線
[英]Moving vertical line when hovering over the chart using chart.js in v2.9.4
如何在 Chart.js 2.9.3 中繪制具有動態厚度的水平條（在瀏覽器 window 高度調整大小時自動重新縮放）？
[英]Howto draw horizontalBar with dynamic thickness (automatic rescale on browser window height resize) in Chart.js 2.9.3?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.