2014-02-04 3 views
1

Я пытаюсь извлечь данные из таблицы mysql и установить его как категории по оси x, но я не совсем понимаю, как это сделать.Категории высоких диаграмм из массива данных

В принципе, у меня есть номера заданий в таблице, и я хочу вытащить их и сделать их категориями по оси x, в конце концов, когда щелкнут столбец для определенного задания, он будет развернут для большего количества столбцов (которые составляют общий процент от числа рабочих мест).

Вот пример того, что я пытаюсь сделать, он работает с данными столбца при использовании массива там, но не с категориями, поэтому он не будет работать таким образом.

http://codepen.io/anon/pen/BoJqA

Как бы я идти об этом?

ответ

2

Я не уверен, если вопрос «как я могу сделать это с помощью PHP/MySQL» или «как я могу определить имена столбцов в Highcharts». я постараюсь ответить на последнее. попробовать этот код, чтобы показать пользовательские имена столбцов вместо 1,2,3, ...:

$(function() { 
    var data = {"name":"Percentage","data":[50,28,150,125,34,75]}; 
    var categories = [5600, 5700,5800,5900,6000,6100]; 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'column' 
     }, 
     title: { 
      text: 'Job Budget Report' 
     }, 
     xAxis: { 
      categories: categories 
     }, 
     yAxis: { 
      title: { 
       text: '% Budget hrs' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     series: [data] 
    }); 
}); 
+0

Ну, и то, и другое, у меня есть диаграмма столбцов диаграммы диаграммы. Я получил номера заданий для отображения с использованием запроса и В начальных столбцах благодаря каждой помощи здесь (дал мне лучшее понимание), однако второй уровень сверла вниз дает мне некоторые проблемы. Как вы думаете, вы могли бы помочь мне в этом, как это сделать? Вот скрипка: http: // jsfiddle.net/98Fuq/4/ – MikeOscarEcho

+0

скрипка, кажется, работает нормально, когда я нажимаю на столбцы, появляются столбцы с деталями. В чем проблема? –

+0

Нет проблем с этим. Но, как вы видите, данные жестко закодированы, поэтому мне было интересно, знаете ли вы хорошее решение по извлечению данных из моей таблицы для каждой работы. Например, если вы набираете данные для этого, каждый раз, когда вы нажимаете на него, высылается каждый час всплытия. Возможно, я должен создать новый вопрос. – MikeOscarEcho

1

Я никогда не использовал Highcharts, но если у него нет интерфейса для прямого доступа к базе данных, я думаю, что все, что вам нужно сделать, это вытащить данные из запроса mySQL и поместить его в массив, который будет использоваться Highcharts.

Может быть что-то вроде:

$mysqli = new mysqli("example.com", "user", "password", "database"); 
if ($mysqli->connect_errno) { 
    echo "Failed to connect to MySQL: " . $mysqli->connect_error; 
} 

$countsPerJob = array(); 
$res = $mysqli->query("SELECT jobNumber FROM JobTable"); 
while(($row = $res->fetch_assoc())) { 
    if(isset($countsPerJob[$row['jobNumber'])) { 
     ++$countsPerJob[$row['jobNumber']]; 
    } else { 
     $countsPerJob[$row['jobNumber']] = 1; 
    } 
} 

Теперь $countsPerJob имеет всю информацию из таблицы базы данных. Затем вы можете использовать ключи от $countsPerJob для категорий и значений для каждой записи в массиве для высоты столбца.

1

Похоже, у вас есть больше данных, чем категорий? (У вас есть 6 точек данных и 3 категории).

Однако, я думаю, вам нужно предоставить массив категориям, но вы поставляете объект. Вы можете изменить свой код:

$(function() { 
    var data = {"name":"Percentage","data":[50,28,150,125,34,75]}; 
    var categories = [5600, 5700,5800]; 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'column' 
     }, 
     title: { 
      text: 'Job Budget Report' 
     }, 
     xAxis: { 
      categories: categories 
     }, 
     yAxis: { 
      title: { 
       text: '% Budget hrs' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     series: [data] 
    }); 
}); 
1

«категории» это просто простой массив. Вы определили бы как

var categories = [5600, 5700,5800]; 

А потом на графике:

xAxis: { 
    categories: categories 
} 

(или, конечно, вы можете просто заполнить их прямо на графике)

Однако, как было отмечено в другом месте , у вас есть 3 категории и 6 точек данных, поэтому ваши последние 3 точки данных будут иметь категории «3», «4» и «5», как есть.

Если диаграмма должна быть сгруппированной диаграммой, вам нужно будет настроить свои данные по-разному. Если нет, вам нужно будет предоставить больше названий категорий.

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