Javascript chart.js使用固定宽度扭曲的图表
我在一个容器中有一个chart.js画布,我给了它一个固定的最小宽度,这样人们可以在移动设备上滚动图表 但是一旦容器有了固定的宽度,图表就会变得更加扭曲,屏幕就会变得越小 在图表中,我已经尝试设置选项Javascript chart.js使用固定宽度扭曲的图表,javascript,css,chart.js,Javascript,Css,Chart.js,我在一个容器中有一个chart.js画布,我给了它一个固定的最小宽度,这样人们可以在移动设备上滚动图表 但是一旦容器有了固定的宽度,图表就会变得更加扭曲,屏幕就会变得越小 在图表中,我已经尝试设置选项responsive:true和maintaintaspectratio:false。这稍微解决了问题,但图表仍然扭曲 Chart.js选项: var options = { responsive: true, maintainAspectRatio: false, scal
responsive:true
和maintaintaspectratio:false
。这稍微解决了问题,但图表仍然扭曲
Chart.js选项:
var options = {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked: false,
gridLines: {
display: true,
color: "rgba(151,151,151,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true,
color: "rgba(151,151,151,0.2)"
}
}]
}
};
HTML:
工作图
扭曲图表
.tds图表内部{
宽度:100%;
}
var ctx=document.getElementById(“myChart”).getContext(“2d”);
var myChart=新图表(ctx{
键入:“行”,
数据:{
标签:[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”],
数据集:[{
标签:“#投票数”,
数据:[12,19,3,5,2,3,80],
背景颜色:[
"rgba(255,99,132,0.2)",,
“rgba(54162235,0.2)”,
"rgba(255,206,86,0.2)",,
“rgba(751921920.2)”,
“rgba(153102255,0.2)”,
‘rgba(255、159、64、0.2)’
],
边框颜色:[
"rgba(255,99132,1)",,
“rgba(54162235,1)”,
"rgba(255,206,86,1)",,
"rgba(751921921)",,
"rgba(153102255,1)",,
‘rgba(255、159、64、1)’
],
边框宽度:1
}]
},
选项:{
比例:{
雅克斯:[{
滴答声:{
贝吉纳泽罗:是的,
fontColor:“红色”
}
}]
}
}
});
对我来说,问题是图形本身设置的高度比我自己设置的画布要大 我的解决办法是:
responsive:true,
MaintaintAspectRatio:false,
尝试将图表包装在一个div中,并使用css将该div设置为固定大小。我想这就是我过去解决这个问题的方法,但无法验证atm。你能分享你的代码吗。@Alex这就是我正在做的:/@ArpitJain我已经添加了你想要固定图表宽度的代码。是的,我想要图表宽度为100%,或者如果设备宽度小于850px,我希望图表保持850px的宽度。。。看看我上面的代码,你有什么进一步的想法吗?
<div class="tds-chart-inner tds-hor-scroll">
<canvas id="tds-chart-mem"></canvas>
</div>
.tds-chart-inner {
min-width: 850px !important;
}
.tds-hor-scroll {
left: 0px;
width: 100% !important;
overflow-x: scroll;
}
canvas {
left: 0px;
height: 300px !important;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<style>
.tds-chart-inner {
width:100%;
}
</style>
<body class="">
<div class="tds-chart-inner tds-hor-scroll">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3,80],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor: 'red'
}
}]
}
}
});
</script>