HighChartsのX軸ラベル

このクラスターのコードは、曜日に飲酒されたビールの数をカウントするチャートを生成します。私の問題は、X軸を横切って表示されている曜日ラベルを取得することです。写真では、配列の両方の列（Beers、Day）が表示されているのを見ることができますが、表示するには数日かかることはありません。別の配列に曜日をロードしたくないので、X軸が変わる他のチャートがあります。HighChartsのX軸ラベル

x軸を取得する方法上の任意の提案：チャートのアレイの1列のみを表示する：[{データ：}] {categores}または一連？

<!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>

おかげで、ティム

出典

2017-01-17 Tim Peters

あなたはxAxis.categoriesプロパティとして2次元配列mydataを使用しています。あなただけの一日使用したい：

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

これはmydataはこのようになっていることを想定している：

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

は、あなたがそのあまり飲まないかどうかをコーディングする方が簡単かもしれません。）

出典

2017-01-17 22:01:29 Jeff

ありがとう！あなたはhttp://www.beerintelligenceproject.com/でチャートを作成しました。少ない飲酒でコードする方が簡単かもしれませんが、それにはあまり理由はありません:) –

答えて

関連する問題