如何显示Google Chart图例文字?

时间:2017-01-08 19:02:08

标签: javascript google-visualization

由于不明原因,我们的代码已停止在我们的谷歌折线图的图例中显示文字。

enter image description here

我们已尝试更改图表的宽度和图表区域,如other SO posts中所述。我们也试过改变传奇的位置而没有效果。我们也没有使用此处提到的任何custom CSS。控制台中没有错误。

知道如何解决此问题以显示图例文字吗?

HEAD:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>

BODY HTML:

<div id="volume_adjusted_visits_by_month_combined"></div>

脚本:

<script>
google.charts.load('current', {packages: ["corechart"]});
    google.charts.setOnLoadCallback(volume_adjusted_visits_by_month_combined);
    function volume_adjusted_visits_by_month_combined()
    {
      var data = new google.visualization.DataTable();
      data.addColumn({type:'number', id:'Month'});
data.addColumn({type:'number', id:'All_Visits'});
data.addColumn({type:'number', id:'KS'});

      data.addRows([
      [1,1.0,0.98],[2,1.0,0.95],[3,1.0,0.95],[4,1.0,0.98],[5,1.0,1.01],[6,1.0,1.05],[7,1.0,1.14],[8,1.0,1.12],[9,1.0,1.05],[10,1.0,0.91],[11,1.0,0.96],[12,1.0,0.9],
      ]);
    var options =
     {'colors': ['#D3D3D3', 'black'], 'pointSize': 10, 'width': 600, 'vAxis': {'title': 'Ratio'}, 'title': 'Volume Adjusted Monthly Pattern of KS', 'series': {'1': {'pointShape': 'square', 'pointSize': 10}, '0': {'pointShape': 'circle', 'lineDashStyle': [10, 4], 'pointSize': 7}}, 'height': 600, 'hAxis': {'title': 'Months', 'minValue': 0, 'gridlines': {'count': -1}}}
    ;
    var plain = document.getElementById('plain_text_set') !== null
    var chart = new google.visualization.LineChart(document.getElementById('volume_adjusted_visits_by_month_combined'));
    if (plain) {
    var chart_div = document.getElementById('volume_adjusted_visits_by_month_combined');
    google.visualization.events.addListener(chart, 'ready', function () {
      chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
      console.log(chart_div.innerHTML);
    });}

      chart.draw(data, options);
    }

</script>

1 个答案:

答案 0 :(得分:1)

您错过了列中的标签:

data.addColumn({type:'number', id:'Month', label: 'Months'});
data.addColumn({type:'number', id:'All_Visits', label: 'Visits'});
data.addColumn({type:'number', id:'KS', label: 'KS'});