Question

这是我的代码：

var chart = [[''],['']];
chart[0][1]='Spearmint';
chart[1][1]='3.95';

var data = google.visualization.arrayToDataTable(chartArr);
 var options = {
     title: questions[i].getAttribute("desc"),
     is3D: true,
     width:600 //with or without this parameter
 };
 chart = new google.visualization.ColumnChart(document.getElementById('questionchart_' + questions[i].getAttribute("num")));
 chart.draw(data, options);

似乎正在切断传奇文本。 您只需要参考第一张图

这是一张图片：

Graph Image

仔细观察，您会看到图例显示Sp....。这是不准确的，因为它应显示位置的全名（Spearmint）。

以下是我使用的DOM Element：

<div id="questionchart_1" style="width:750px"></div>

我不知道如何解决这个问题。

Answer 1

chartArea的尺寸需要根据图例的位置和需要显示的标签尺寸进行调整。
还需要考虑标题，轴标签等的大小......

在这里，我添加了背景颜色以帮助演示......

google.charts.load('current', {
  packages: ['corechart'],
  callback: drawChart
});

function drawChart() {
  var chartArr = [[''],['']];
  chartArr[0][1] = 'Spearmint';
  chartArr[1][1] = 3.95;

  var data = google.visualization.arrayToDataTable(chartArr);
  var options = {
    chartArea: {
      backgroundColor: 'cyan',
      height: 320,
      left: 32,
      top: 40,
      width: 434
    },
    height: 400,
    legend: {
      position: 'right'
    },
    title: 'Flavors',
    width: 600
  };
  var chart = new google.visualization.ColumnChart(document.getElementById('questionchart_0'));
  chart.draw(data, options);
}

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

Google图表图例缩小文字

1 个答案: