2017-02-03 13 views
1

棒グラフをthis JSFiddleとします。Googleの棒グラフでは、1つの軸ラベルのスタイルを変更することはできますか?

縦軸ラベルの1つのみのスタイルを変更する方法はありますか?たとえば、「Houston、TX」を他の都市名に影響を与えずに太字に変更することはできますか?一つの方法は、その後の作業スニペット以下を参照してください'font-weight'

ため<text>要素の属性を変更するには、グラフの'ready'イベント、

に待つことであろう

google.charts.load('current', {packages: ['corechart', 'bar']}); 
google.charts.setOnLoadCallback(drawMultSeries); 

function drawMultSeries() { 
     var data = google.visualization.arrayToDataTable([ 
     ['City', '2010 Population', '2000 Population'], 
     ['New York City, NY', 8175000, 8008000], 
     ['Los Angeles, CA', 3792000, 3694000], 
     ['Chicago, IL', 2695000, 2896000], 
     ['Houston, TX', 2099000, 1953000], 
     ['Philadelphia, PA', 1526000, 1517000] 
     ]); 

     var options = { 
     title: 'Population of Largest U.S. Cities', 
     chartArea: {width: '50%'}, 
     hAxis: { 
      title: 'Total Population', 
      minValue: 0 
     }, 
     vAxis: { 
      title: 'City' 
     } 
     }; 

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

答えて

0

...

google.charts.load('current', {packages: ['corechart', 'bar']}); 
 
google.charts.setOnLoadCallback(drawMultSeries); 
 

 
function drawMultSeries() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['City', '2010 Population', '2000 Population'], 
 
    ['New York City, NY', 8175000, 8008000], 
 
    ['Los Angeles, CA', 3792000, 3694000], 
 
    ['Chicago, IL', 2695000, 2896000], 
 
    ['Houston, TX', 2099000, 1953000], 
 
    ['Philadelphia, PA', 1526000, 1517000] 
 
    ]); 
 

 
    var options = { 
 
    title: 'Population of Largest U.S. Cities', 
 
    chartArea: {width: '50%'}, 
 
    hAxis: { 
 
     title: 'Total Population', 
 
     minValue: 0 
 
    }, 
 
    vAxis: { 
 
     title: 'City' 
 
    } 
 
    }; 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.BarChart(container); 
 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function (label) { 
 
     if (label.innerHTML === 'Houston, TX') { 
 
     label.setAttribute('font-weight', 'bold'); 
 
     } 
 
    }); 
 
    }); 
 
    chart.draw(data, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

関連する問題