X оси метки на HighCharts

Это clusterf… код генерирует диаграмму, которая должна подсчитывать количество выпитого пива в день недели. Моя проблема заключается в том, чтобы метки дня недели отображались по оси X. На картинке вы можете увидеть оба столбца массива (пиво,день), но я не могу получить просто дни, чтобы показать. Я не хочу загружать дни недели в отдельный массив, так как у меня есть другие графики, где ось X будет отличаться.

Введите описание изображения здесь

Есть предложения, как получить xAxis : {categores} или series :[{data:}] для отображения только одного столбца массива на диаграмме?

<!DOCTYPE HTML>
<?php

include "config_mysqli.php";
$con = mysqli_connect($host, $user, $password, $database);
if (mysqli_connect_errno())
die('Could not connect: ' . mysqli_connect_error());

if (!$con) {  die('Could not connect: ' . mysql_error());}

$sql = "SELECT COUNT(*) AS 'Beers', DAYNAME(date) as 'Day'
FROM beer
WHERE date IS NOT NULL
GROUP BY DAYNAME(date) , DAYOFWEEK(date)
ORDER BY DAYOFWEEK(date);";

$result = $con->query($sql);

$rows = array();
while($r = mysqli_fetch_array($result)) {
$row[0] = $r['Day'];
$row[1] = $r['Beers'];
array_push($rows,$row);}

$data=json_encode($rows, JSON_NUMERIC_CHECK);

$sql2 = " SELECT DAYNAME(date) as 'TopDay'
FROM beer
WHERE date IS NOT NULL
GROUP BY DAYNAME(date)
ORDER BY COUNT(*) DESC
LIMIT 1;";

$result2 = $con->query($sql2);

$rows2 = array();
while($r2 = mysqli_fetch_array($result2)) {
$row2[0] = $r2['TopDay'];
array_push($rows2,$row2);}

$theTitle =  implode($rows2[0]);

?>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Beer Intelligence Project</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>
$(function () {
var chart,
mydata = <?php echo $data ?>;
$(document).ready(function() {
chart = new Highcharts.Chart({
    chart: {
        renderTo: 'bar',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    xAxis: {
    categories: mydata
        },
    yAxis: {
        title: {
            text: 'Beers' 
       }
        },
    title: {
        text: 'Beers by day of the week'
    },
subtitle: {
        text: 'The most beers are drank on a  <?php echo $theTitle?> '
    },
    tooltip: {pointFormat: '<tr><td style="color:{series.color};padding:0">Number of beers: </td>' + '<td style="padding:0"><b>{point.y:,.0f}</b></td></tr>'
    },
series: [{
        type: 'column',
        name: 'Beers',
        data: mydata,
    color: 'black'
            }] 
    });
});
});
</script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
    <div id="bar"></div>
</body>
</html>

Спасибо,
Тим

1 ответ

  1. В качестве свойства используется двухмерный массивmydataxAxis.categories. Вы просто хотите использовать день:

    xAxis: {
      categories: mydata.map(function(data){ return data[0] });
    },
    

    Это предполагает, что mydataвыглядит следующим образом:

    [["Wednesday",62],["Thursday", 47]]
    

    Может быть проще кодировать, если вы не пьете так много 😉