Google ChartでX軸のタイトルを表示

AndroidのWebビューでgoogle chartsを使用して縦棒グラフのx軸の見出しを表示したいとします。は私がGoogle ChartでX軸のタイトルを表示

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] 
    ]);

にYearとして、x軸の見出しを表示しようとしています。しかし、それは、見出しが表示されません。完全なコード。

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

    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] 
    ]); 

    var options = { 
    animation:{ 
     duration: 1000, 
     easing: 'linear', 
     startup: true 
    }, 
    height: 600, 
    theme: 'material', 
    title: 'Company Performance' 
    }; 

     var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material')); 
    chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="columnchart_material" style="width: 900px; height: 500px;"></div> 
    </body> 
</html>

出典

2017-03-11 Humty

私はあなたが探しているオプションがあると思い- >hAxis.title

hAxis: { title: 'Year' },

作業スニペット以下を参照してください...

google.charts.load('current', { callback: function() { drawChart(); window.addEventListener('resize', drawChart, false); }, packages:['corechart'] }); 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] ]); var options = { animation:{ duration: 1000, easing: 'linear', startup: true }, height: 600, hAxis: { title: data.getColumnLabel(0) }, theme: 'material', title: 'Company Performance' }; var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material')); chart.draw(data, options); }

<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="columnchart_material" style="width: 900px; height: 500px;"></div>

出典

2017-03-11 15:34:42 WhiteHat

素晴らしいです。しかし、「[年]、[売上]、[経費]、[利益]]で定義された見出しを表示しない理由は何ですか？ – Humty

これらはデータ内の列の見出しです - あなたは - > 'data.getColumnLabel（0）'でそれらを使うことができます - 上の変更された答えを見てください... – WhiteHat

Google ChartでX軸のタイトルを表示

答えて

関連する問題