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

Question

I tried lot of solutions in Stackoverflow for similar questions, none of them worked and I couldn't find any solution. 我在Stackoverflow中尝试了很多解决方案来解决类似的问题，但这些解决方案均无济于事，我找不到任何解决方案。

How should I make each item in bar graph to have a minimum width so that I would have a horizontal scroll option for viewing the data. 我应该如何使条形图中的每个项目都具有最小宽度，以便可以使用水平滚动选项来查看数据。 If I don't use minimum width, all the lines are compressing and the UI is not looking good at all. 如果我不使用最小宽度，则所有行都在压缩，并且UI看起来一点也不好。

Should I add style in new Chart method or is there any other way? 我应该在新的Chart方法中添加样式还是还有其他方法？

Here is my code: 这是我的代码：

          <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

well, seems like you want to make a scrollable view? 好吧，好像您想制作一个可滚动的视图？
how about just add a wrapper div between your original div and canvas , and give width for that one? 仅在原始div和canvas之间添加包装器div并为该宽度指定宽度如何？

 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>

hmmm.... is this you want?? 嗯...你想要这个吗？

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

问题描述

1 个解决方案

解决方案1
0 2017-09-04 03:51:03

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

问题描述

1 个解决方案

解决方案1 0 2017-09-04 03:51:03

解决方案1
0 2017-09-04 03:51:03