2017-02-03 1 views
1

Рассмотрите гистограмму в this JSFiddle.В диаграмме панели Google я могу по-разному нарисовать одну ось метки?

Есть ли способ изменить стиль только одной из меток вертикальной оси? Например, могу ли я изменить «Хьюстон, штат Техас», чтобы быть жирным, не затрагивая другие названия городов?

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

один путь будет ждать на 'ready' событии графика,

затем измените атрибут <text> элемент для 'font-weight'

см следующий рабочий фрагмент кода ...

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>

Смежные вопросы