Question

我已经准备好Google“条形图”，使其正常工作。如何将条形图的方向从垂直更改为水平？

我尝试使用vAxis: {direction:-1}来更改图表的方向，但不起作用。

我试图从Google图表站点获取解决方案，但是我找不到Stacked＆Group的其他任何用于水平条形图的解决方案。还有其他方法可以更改Google“条形图”的方向吗？

<html>

<title>Web Page Design</title>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
        google.charts.load('current', { 'packages': ['bar'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([

                ['Year', 'Sales', 'Expenses', 'Profit'],
                ['2014', 1000, 400, 200],
                ['2015', 1170, 460, 250],
                ['2016', 660, 1120, 300],
                ['2017', 1030, 540, 350],
                ['2017', 1030, 540, 350]
            ]);

             var options = { 
                 
                 
                isStacked: true,pointSize: 15, 
                vAxis: {
                  viewWindow: {
                    
                    min: 0,
                    
                  }
                },
                
                legend: {
                   position:'bottom',
                    textStyle: {
                        bold: false,
                        fontSize: 12,
                 }

                },
                is3D: true,

                
                
               
                 vAxes: {
                    
                    0:{
                       
                    title: 'value in lac' 
                        },
                  1: {
                      
                    gridlines: {
                      color: 'transparent'
                    },
                    textStyle: {
                      color: 'transparent'
                    }
                  },

                 2: {
                     
                    gridlines: {
                      color: 'transparent'
                    },
                    textStyle: {
                      color: 'transparent'
                    }
                  },
                

                },
                
                


                series: {
                  0: {
                    targetAxisIndex: 0,
                    color:'#2A6DDA'
                  },
                  1: {
                    targetAxisIndex: 1,
                    color:'#FF5733'
                  },
                  2: {
                    targetAxisIndex: 1,
                    color:'#FFC300'
                  },
                  3: {
                    targetAxisIndex: 1,
                    color:'#D3A4FA'
                  },
 
                },
              };
                

                var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

                chart.draw(data, google.charts.Bar.convertOptions(options));
                    }
                </script>
</head>
<body>
    <div id="columnchart_material" runat="server" style="width: 600px; height: 500px;">


            
        </div>
</body>
</html>

Answer 1

这是Google图表在其示例page

上的处理方式

您需要使用“ corecharts”而不是“ bars”，然后将调用更改为google.visualization.BarChart()，您将获得单杠。

<html>

  <title>Web Page Design</title>

  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages': ['corechart']
      });
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([

          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350],
          ['2017', 1030, 540, 350]
        ]);

        var options = {


          isStacked: true,
          pointSize: 15,
          vAxis: {
            viewWindow: {
              min: 0,
            }
          },

          legend: {
            position: 'bottom',
            textStyle: {
              bold: false,
              fontSize: 12,
            }

          },
          is3D: true,
          vAxes: {
            0: {
              title: 'value in lac'
            },
            1: {
              gridlines: {
                color: 'transparent'
              },
              textStyle: {
                color: 'transparent'
              }
            },
            2: {
              gridlines: {
                color: 'transparent'
              },
              textStyle: {
                color: 'transparent'
              }
            },
          },
          series: {
            0: {
              targetAxisIndex: 0,
              color: '#2A6DDA'
            },
            1: {
              targetAxisIndex: 1,
              color: '#FF5733'
            },
            2: {
              targetAxisIndex: 1,
              color: '#FFC300'
            },
            3: {
              targetAxisIndex: 1,
              color: '#D3A4FA'
            },
          },
        };

var chart = new google.visualization.BarChart(document.getElementById("columnchart_material"));
      chart.draw(data, options);
      }

    </script>
  </head>

  <body>
    <div id="columnchart_material" runat="server" style="width: 600px; height: 500px;">



    </div>
  </body>

</html>

条形图与堆叠和分组

1 个答案: