2013-11-08 3 views
1

Я хотел бы создать график столбцов на основе php-вывода. Мне удалось вывести данные из php, но я также хотел бы использовать метки и отображать их на xaxis. По какой-то причине вывод кода ниже недействителен. Появляются ярлыки, но на барах и ярлыках xaxis нет.Создайте флот на PHP-данных

PHP:

function getOverview() { 

    $arr[] = array(
     'label' => "Label 1", 
     'data' => array(0, 1) 
    ); 
    $arr[] = array(
     'label' => "Label 2", 
     'data' => array(1, 2) 
    ); 


    echo json_encode($arr); 
} 

Выход: [{ "метка": "Метка 1", "данные": [0,1]}, { "метка": "Метка 2", "данные «: [1,2]}]

JQuery:

$(document).ready(function(){ 

$.ajax({ 
    url: 'http://localhost/getOverview.php', 
    method: 'GET', 
    dataType:"json", 
    success: onOutboundReveived 
}); 

function onOutboundReveived(series) 
{ 

    var options = { 
     series: { 
      bars: { 
       show: true, 
       barWidth: .1, 
       align: 'center' 
      } 
     }, 
     xaxis: { 
      tickSize: 1 
     } 

    }; 

    $.plot("#chart_filled_blue", series, options); 
} 
}); 

Может кто-нибудь мне помочь?

ответ

1

У вас есть пара проблем:

1.) Данные серии должен быть массивом массивов. Не только один массив:

'data' => array(array(1, 2)) 

Это, конечно, так что серия может иметь более чем одну точку (даже если ваш имеет одну точку).

2.) Чтобы получить ярлыки xaxis, у вас есть два варианта. Один, используйте плагин categories. Во-вторых, вручную обеспечить tick labels:

ticks: [[0, "zero"], [1.2, "one mark"], [2.4, "two marks"]] 

В вашей ситуации я бы просто использовать плагин категории. Вам нужно изменить окончательные данные по:

{"label":"Label 1","data":[["Label 1",1]]} 

или в PHP:

$arr[] = array(
    'label' => "Label 1", 
    'data' => array(array("Label 1", 1)) 
); 

Вот fiddle.

enter image description here

0

Я думаю, ваш выход имеет неверный формат. Попробуйте следующее:

[ 
    { 
     label: "Label 1", 
     data: [[0,1]] 
    }, 
    { 
     label: "Label 2", 
     data: [[1,2]] 
    } 
] 
Смежные вопросы