2013-03-14 4 views
1

Я предполагаю, что это может быть вопрос математики, но я все равно попробую! Для отображения моих данных я использую круговую диаграмму Google (https://developers.google.com/chart/interactive/docs/gallery/piechart).Создание данных для круговой диаграммы Google

Как создать полную круговую диаграмму, на данный момент это всего лишь создание крошечных ломтиков, которые не заполняют весь пирог!

Данные собираются из Wordpress - это просто подсчет, сколько компаний являются академическими, деловыми или клиническими. Эти переменные, как следующее:

<p>Academic<?php echo $academic;?></p> 
<p>Business<?php echo $business;?></p> 
<p>Clinical<?php echo $clinical;?></p> 

Для моих тестовых данных, который имеет выход число 1, 2 и 1. По просто положить переменные в коду создает крошечные кусочки, как я могу заполнить пирог?

Пирог в примере Google добавляет до 24, так что будет уравнением? P.s Я мусор по математике!


 google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawVisualization); 
function drawVisualization() { 
    // Create and populate the data table. 
     var data = google.visualization.arrayToDataTable([ 
      ['Task', 'Hours per Day'], 
      ['Academic', '<?php echo $academic; ?>'], 
      ['Business', '<?php echo $business; ?>'], 
      ['Clinical', '<?php echo $clinical; ?>'] 
     ]); 

     var options = { 
      backgroundColor: 'none', 
      chartArea: {width:"221",height:"221"}, 
      width:'221', 
      height:'221', 
      legend: {position: 'none'}, 
      tooltip: {trigger: 'none'}, 
      enableInteractivity: false, 
      slices: {0: {color: '#a95892'}, 1:{color: '#d7663a'}, 2:{color: '#316086'}} 
     }; 

    // Create and draw the visualization. 
    new google.visualization.PieChart(document.getElementById('chart_div')). 
     draw(data, options); 
} 

ответ

2

Это должно работать (по крайней мере, это делает для меня в Code Playground):

function drawVisualization() { 
var data = google.visualization.arrayToDataTable([ 
    ['Type', 'Amount'], 
    ['Academic', <?php echo $academic;?>], 
    ['Business', <?php echo $business;?>], 
    ['Clinical', <?php echo $clinical;?>]]); 
new google.visualization.PieChart(document.getElementById('visualization')).draw(data, {title:"how many?"}); 
} 

http://h3n.info/pie.png

+0

Все это сделано на примере Google является изменение «часов в день "до" Сумма "... он по-прежнему будет строить только мелкие сегменты, а не заполнять весь пирог. – Rob

+0

, но это происходит на игровой площадке кода (https://code.google.com/apis/ajax/playground/?type=visualization#pie_chart) – h3n

+0

Возможно, у вас есть дополнительный код, который изменяет поведение по умолчанию круговой диаграммы, вставьте полный код пожалуйста. Вот как это выглядит в моем браузере: http://h3n.info/pie.png – h3n

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