Question

我试图将柱形图的图例放到顶部，这是我尝试过的代码：

<div id="{{ question.0.name }}" style="width: 100%; height: 400px;"></div>
        <script type="text/javascript">
            google.charts.load('current', {'packages':['bar']});
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {
              var data = google.visualization.arrayToDataTable([
                ['Rating', 'Survey sent {{form_one.date_created}} ', 'Survey sent {{form_two.date_created}} '],
                ['Very Poor', {{ question.1.0.0}}, {{ question.1.1.0}}],
                ['Poor', {{ question.1.0.1}}, {{ question.1.1.1}}],
                ['Average', {{ question.1.0.2}}, {{ question.1.1.2}}],
                ['Good', {{ question.1.0.3}}, {{ question.1.1.3}}],
                ['Very Good', {{ question.1.0.4}}, {{ question.1.1.4}}]

              ]);

              var options = {
                height: 400,   
                legend: {
                            alignment: 'center',
                            position: 'top'
                        }
              };

              var chart = new google.charts.Bar(document.getElementById('{{ question.0.name }}'));

              chart.draw(data, options);
            }
          </script>

它不起作用。请告知我如何让它工作

Answer 1

Material 图表不支持许多选项，包括......

legend.alignment
legend.maxLines
legend.position: ['top', 'bottom']

参见 - ＆gt; Tracking Issue for Material Chart Feature Parity

材料 - ＆gt; google.charts.Bar - packages:['bar']

经典 - ＆gt; google.visualization.BarChart / ColumnChart - packages: ['corechart']

一个选项是使用 Classic 图表，并使用以下选项...

theme: 'material'

将经典图表类似设置为材料图表

请参阅以下工作代码段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Rating', 'Survey sent 1', 'Survey sent 2'],
    ['Very Poor', 1, 2],
    ['Poor', 3, 4],
    ['Average', 5, 6],
    ['Good', 7, 8],
    ['Very Good', 9, 10]
  ]);

  var options = {
    height: 400,
    legend: {
      alignment: 'center',
      position: 'top'
    },
    theme: 'material'
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Google可视化柱形图对齐图例

1 个答案: