Question

图表的宽度没有变化。我试图在画布和JS脚本中更改它，但没有更改。高度正确更改。我也将maintainAspectRatio设置为“ false”，但没有更改。我已经看过以前的文章，并尝试了其他方法，但没有任何变化。我将非常感谢您的协助。谢谢。

  @{
 var profit = JsonConvert.SerializeObject(ViewBag.profit);
  var date = JsonConvert.SerializeObject(ViewBag.Date);

  }

 <!DOCTYPE html>
 <html>
<head>

<meta name="viewport" content="width=device-width" />
<title>Charts</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>
<script>

        var barChartData =
            {
                labels:@Html.Raw(date), //the names displayed on the x-axis,   see images below
            datasets: [{
                label: 'ProductWise Sales Count',
                backgroundColor: [
                    "#f990a7",
                    "#aad2ed",
                    "#9966FF",
                    "#99e5e5",
                    "#f7bd83",
                ],
                borderWidth: 1,
                data: @profit, //what you returned back from controller. values displayed on the y-axis, see images below
                }]
        };

    window.onload = function () {
        var ctx1 = document.getElementById("barcanvas").getContext("2d");
        //ctx1.canvas.width = 50;
        //ctx1.canvas.height = 400;

        window.myBar = new Chart(ctx1,
            {
                type: 'bar',
                data: barChartData,
                options:
                {
                    scales: {
                        xAxes: [{
                            barThickness: 73,
                            categorySpacing: 0,
                            categoryPercentage: 1.0,
                            barPercentage: 1.0
                        }]
                    },

                    title:
                    {
                        display: true,
                        text: "ProductWise Sales Count"
                    },

                    responsive: true,
                    maintainAspectRatio:false
                }
            });
    }
  </script>
  </head>
 <body>

  <div style="text-align: center" >
     <canvas id="barcanvas" position="center" height="500"  width="70"></canvas>
 </div>
 </body>
  </html>

chart.js中的宽度不变

0 个答案: