HighCharts의 X 축 레이블

코드의이 클러스터는 일주일에 술을 마시는 맥주의 수를 계산해야하는 차트를 생성합니다. 내 문제는 X 축에 걸쳐 요일 레이블이 표시되는 것입니다. 그림에서 배열 (Beers, Day)의 두 열이 모두 표시 될 수 있지만 표시 할 수는 없습니다. 나는 X 축이 변하는 다른 차트를 가지고 있기 때문에 별주로 요일을로드하고 싶지 않습니다. categores {} 또는 시리즈 : 다음 x 축를 얻는 방법에HighCharts의 X 축 레이블

어떤 제안 [데이터 {}] 차트의 어레이의 한 칼럼을 표시?

<!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/에서 차트를 만들었습니다. 적은 음주량으로 코딩하는 것이 더 쉬울 수도 있지만, 그다지 이유가 없을 것입니다 :) –

HighCharts의 X 축 레이블

답변

관련 문제