2014-01-10 2 views
0

Google 차트 막대 차트를 만듭니다. 이 데이터는 JSON과 PHP를 사용하여 MySQL에서 가져온 것입니다. 바 차트의 끝 부분에 레이블을 붙이는 것이 좋습니다. 데이터가 동적이기 때문에 어렵다는 것을 알게되었습니다.Google 막대 차트 라벨 동적 데이터. 라벨 추가 방법은 무엇입니까?

<?php 
    $sth = mysql_query("select * from table"); 
    $rows = array(); 
    //flag is not needed 
    $flag = true; 
    $table = array(); 
    $table['cols'] = array(
        array('label' => 'Stats', 'type' => 'string'), 
        array('label' => 'Value', 'type' => 'number') 
        ); 
    $rows = array(); 
    while($r = mysql_fetch_assoc($sth)) 
    { 
    $temp = array(); 
    $temp[] = array('v' => (string) $r['Stats']); 
    $temp[] = array('v' => (int) $r['Value']); 
    $rows[] = array('c' => $temp); 
    } 
    $table['rows'] = $rows; 
    $jsonTable = json_encode($table); 
?> 
<script type="text/javascript"> 
    google.load('visualization', '1', {'packages':['corechart']}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>); 
     var options = { 
      legend: {position: 'none'}, 
     bar: {groupWidth: "85%"}, 
     colors:['#4A9218'], 
     hAxis: { 
        viewWindowMode: 'explicit', 
        viewWindow: { 
           max: 400, 
           min: 0, 
           }, 
        gridlines: { 
           count: 10, 
           } 
          }   
    }; 
    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 
</script> 
<!--this is the div that will hold the pie chart--> 
<div id="chart_div" style="width:100%; height:200px"></div> 

결과 : 내가 찾고 있어요없이 라벨 결과와 막대 차트 : 올바른

답변

1

처음에 말에 라벨과 막대 차트, MySQL의 출력 번호와 같은, 당신의 json_encode 전화에 JSON_NUMERIC_CHECK를 추가 문자열로 숫자를 입력하면 차트에 문제가 발생할 수 있습니다.

$jsonTable = json_encode($table, JSON_NUMERIC_CHECK); 

데이터 값을 바의 주석으로 추가하려면

var view = new google.visualization.DataView(data); 
view.setColumns([0, 1, { 
    type: 'string', 
    role: 'annotation', 
    sourceColumn: 1, 
    calc: 'stringify' 
}]); 

그런 다음 DataTable을 대신 차트를 그려보기를 사용합니다 : RS는, 가장 쉬운 방법은 값 열에서 데이터를 받아이를 stringifies 계산 'annotation' 역할 열을 포함하는 DataView를을 만드는 것입니다

chart.draw(view, options);