"响应性”;Chart.js图表比包含窗口高
"Responsive" Chart.js chart is taller than the containing window
我正在使用Chart.js库创建一系列图表。我注意到,当指定"responsived:true"选项时,虽然画布确实限制了页面宽度,但它并没有限制自己的页面高度,即使在全屏时也是如此。下面是一把小提琴:http://jsfiddle.net/uxtb9wj9/
StackOverflow需要我在jsfiddle链接中添加代码,所以它是:
HTML
<div class="row chartArea">
<div class="col-md-12">
<div class="chartArea">
<canvas id="chart" style="height: auto !important;"></canvas>
</div>
</div>
</div>
JS-
function widgetCallback(response) {
console.log("widgetCallback; response: " + JSON.stringify(response));
var chartData = jQuery.parseJSON(response);
//Some dummy values - delete later
var labels = chartData['chart1']['labels'];
var dataSet1Title = chartData['chart1']['dataTitle'];
var dataSet2Title = chartData['chart2']['dataTitle'];
var dataSet1Data = chartData['chart1']['data'];
var dataSet2Data = chartData['chart2']['data'];
Chart.types.Line.extend({
name: "Line2Y",
getScale: function (data) {
var startPoint = this.options.scaleFontSize;
var endPoint = this.chart.height - (this.options.scaleFontSize * 1.5) - 5;
return Chart.helpers.calculateScaleRange(
data,
endPoint - startPoint,
this.options.scaleFontSize,
this.options.scaleBeginAtZero,
this.options.scaleIntegersOnly,
this.options.scaleLabel);
},
initialize: function (data) {
var y2datasetLabels = [];
var y2data = [];
var y1data = [];
data.datasets.forEach(function (dataset, i) {
if (dataset.y2axis == true) {
y2datasetLabels.push(dataset.label);
y2data = y2data.concat(dataset.data);
} else {
y1data = y1data.concat(dataset.data);
}
});
// use the helper function to get the scale for both datasets
var y1Scale = this.getScale(y1data);
this.y2Scale = this.getScale(y2data);
var normalizingFactor = y1Scale.max / this.y2Scale.max;
// update y2 datasets
data.datasets.forEach(function (dataset) {
if (y2datasetLabels.indexOf(dataset.label) !== -1) {
dataset.data.forEach(function (e, j) {
dataset.data[j] = e * normalizingFactor;
})
}
})
// denormalize tooltip for y2 datasets
this.options.multiTooltipTemplate = function (d) {
if (y2datasetLabels.indexOf(d.datasetLabel) !== -1) return Math.round(d.value / normalizingFactor, 6);
else return d.value;
}
Chart.types.Line.prototype.initialize.apply(this, arguments);
},
draw: function () {
this.scale.xScalePaddingLeft = 60;
this.scale.xScalePaddingRight = this.scale.xScalePaddingLeft + 30;
Chart.types.Line.prototype.draw.apply(this, arguments);
this.chart.ctx.textAlign = "center";
this.chart.ctx.textBaseline = "bottom";
this.chart.ctx.fillStyle = "#666";
var ctx = this.chart.ctx;
ctx.save();
// position
var x = this.scale.xScalePaddingLeft * 0.4;
var y = this.chart.height / 2;
// change origin
ctx.translate(x, y)
// rotate text
ctx.rotate(-90 * Math.PI / 180);
ctx.fillText(this.datasets[0].label, 0, 0);
ctx.fillText(this.datasets[1].label, 0, this.chart.width - 60);
ctx.restore();
var yStep = (this.scale.endPoint - this.scale.startPoint) / this.y2Scale.steps
for (var i = 0, y = this.scale.endPoint, label = this.y2Scale.min;
i <= this.y2Scale.steps;
i++) {
this.chart.ctx.fillText(label, this.chart.width - this.scale.xScalePaddingRight + 20, y);
y -= yStep;
label += this.y2Scale.stepValue
}
}
});
var lineChartData1 = {
labels: labels,
datasets: [{
label: dataSet1Title,
fillColor: "rgba(0,255,0,0.5)",
strokeColor: "rgba(0,255,0,1)",
pointColor: "rgba(0,255,0,1)",
pointStrokeColor: "#fff",
data: dataSet1Data
}, {
label: dataSet2Title,
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: dataSet2Data,
y2axis: true
}]
}
var ctx = document.getElementById("chart").getContext("2d");
var myLine1 = new Chart(ctx).Line2Y(lineChartData1, {
scaleBeginAtZero: true,
scaleShowGridLines: false,
responsive: true,
scaleShowLabels: true,
showTooltips: true,
tooltipTemplate: "<%= datasetLabel %>: <%= value %>"
});
}
var response = '{"chart1":{"data":["826","748","76","58"],"labels":["10-08","10-09","10-10","10-11"],"labelTitle":"Date","dataTitle":"Uniques","title":"Uniques"},"chart2":{"data":["2018.00","2095.40","156.00","23.76"],"labels":["10-08","10-09","10-10","10-11"],"labelTitle":"Date","dataTitle":"Revenue","title":"Revenue"},"title":"Chart Title"}';
widgetCallback(response);
外部资源
jQuery 2.1.4,Bootstrap CSS 3.0,Chart.js 1.0.2
(在小提琴中,只需将"结果"部分的宽度调整为其高度的两倍,然后重新运行小提琴。)
如何使图表不仅限于窗口宽度,还限于高度?非常感谢。
我认为在您的案例中使用视口高度是个好主意。这在Javascript中相当容易:
<html>
<head>
<meta charset="utf-8"/>
<title>TEST</title>
<style>
* {padding: 0; height: 0;}
canvas { width: 100%; }
</style>
</head>
<body>
<canvas id="chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script>
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var ctx = document.getElementById("chart").getContext("2d");
ctx.canvas.style.height = window.innerHeight;
var myLineChart = new Chart(ctx).Line(data);
</script>
</body>
</html>
关键似乎在这三个变化中:
1) 未使用库提供的"responsived:true"选项
2) 显式设置宽度和高度
3) 将高度设置为window.innerHeight的90%,而不是100%,否则它仍然比包含的窗口高。
var ctx = document.getElementById("chart").getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight * 0.9;
var myLine1 = new Chart(ctx).Line2Y(lineChartData1, { scaleBeginAtZero: true, scaleShowGridLines: false, scaleShowLabels: true, showTooltips: true, tooltipTemplate: "<%= datasetLabel %>: <%= value %>" });
相关文章:
- Javascript,包含窗口边缘内的图像
- 如何找到td类并检查它是否包含类,然后我需要显示弹出窗口
- 仅包含某些数组值的单个弹出窗口.JavaScript
- 尝试在主窗口中包含子窗口
- 打开包含帖子数据的弹出窗口
- 检查打开的浏览器窗口是否包含特定字符串
- 关闭包含 silverlight 的 Javascript 弹出窗口
- 在将灯箱添加到我的网站时遇到问题.只是得到一个只包含图片而不是弹出窗口的页面
- 将鼠标悬停在表行上时,如何显示包含该行字段数据的弹出窗口
- 如何在调整窗口大小时重新加载网页,并且仅当它包含特定的 HTML 元素时
- 如何在优胜美地中打开一个新的Chrome窗口,其中包含javascript自动化
- 当通过导入包含 jQuery 时,窗口加载事件不会触发
- 包含小程序的窗口
- JavaScript.打开包含一些内容的窗口
- 打开一个新窗口,其中包含从 XMLHttpRequest 返回的 blob 对象中的 PDF 数据
- HTML 弹出窗口,其中包含表单提交的链接
- 打开包含数据而不是 window.print 事件的新窗口
- "响应性”;Chart.js图表比包含窗口高
- 允许Flash影片通信到包含窗口,而不暴露完整的外部接口
- 如何获得对包含窗口的XUL iframe的引用