Question

我在Stackoverflow中尝试了很多类似问题的解决方案，但没有一个能够解决问题。我找不到任何解决方案。

如何使条形图中的每个项目具有最小宽度，以便我有一个水平滚动选项来查看数据。如果我不使用最小宽度，则所有行都在压缩，并且UI看起来并不好看。

我应该在新的Chart方法中添加样式还是有其他方法吗？

这是我的代码：

          <head>

            <style type="text/css">

              .barcanvas 
              {
                overflow-x: scroll;
              }

            </style>

          </head>
          <body>


              <div style="width: 40%" id="bardiv">
                <canvas id="barcanvas"></canvas>
              </div>


          </body>

        <script>    



                var barChartData = {
                    labels: ["January", "February", "March","April","May","January", "February", "March","April","May","January", "February", "March","Coon","May","Dude", "Etf", "March","April","May"],
                    datasets: [{
                        label: 'Dataset 1',
                        backgroundColor: '#33b5e5',
                        data: [
                            17,
                            11,
                            12,
                            13,
                            14,
                            17,
                            11,
                            12,
                            13,
                            14,
                            17,
                            11,
                            12,
                            13,
                            14,
                            17,
                            11,
                            12,
                            13,
                            14,

                           ]
                    }]

                };



                window.onload = function() {


                    var ctx1 = document.getElementById("barcanvas").getContext("2d");
                    window.myBar = new Chart(ctx1, {
                        type: 'bar',
                        data: barChartData,
                        options: {
                            title:{
                                display:true,
                                text:"Bar Graph"
                            },
                            tooltips: {
                                mode: 'index',
                                intersect: false
                            },
                            responsive: true,
                            scales: {
                                xAxes: [{
                                    style: {
                                   stacked: true,
                    },
                                }],
                                yAxes: [{
                                    stacked: true
                                }]
                            }
                        }
                    });

                    }


        </script>

Answer 1

好吧，好像你想要制作一个可滚动的视图？如何在原始div和div之间添加包装canvas，并为该广告提供宽度？

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "January", "February", "March", "April", "May", "January", "February", "March", "Coon", "May", "Dude", "Etf", "March", "April", "May"],
    datasets: [{
        label: 'Dataset 1',
        backgroundColor: '#33b5e5',
        data: [
            17,
            11,
            12,
            13,
            14,
            17,
            11,
            12,
            13,
            14,
            17,
            11,
            12,
            13,
            14,
            17,
            11,
            12,
            13,
            14,

        ]
    }]

};

var ctx1 = document.getElementById("barcanvas").getContext("2d");

window.myBar = new Chart(ctx1, {
    type: 'bar',
    data: barChartData,
    options: {
        title: {
            display: true,
            text: "Bar Graph"
        },
        tooltips: {
            mode: 'index',
            intersect: false
        },
        responsive: true,
        scales: {
            xAxes: [{
                style: {
                    stacked: true,
                },
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});

.barcanvas 
              {
                overflow-x: scroll;
              }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<div style="width: 40%" id="bardiv">
  <div style="width: 1024px">
    <canvas id="barcanvas"></canvas>
  </div>
</div>

嗯....这是你想要的吗？

如何在chartjs中向条形图添加水平滚动？

1 个答案: