Highcharts 柱形图颜色来自 sql 数据
Highcharts column graph colors via sql data
我正在尝试获取从 bit.type 中提取的数据以显示为特定颜色。
我在正确提取名称并将其显示在系列下的地方得到它。
这可能不会显示所有代码,因为它是正确的 link。 Full code
<?php // Initialize require_once('../../../data.php');
function calculate_week_number($timestamp = 0, $start_of_week = 0) {
// Use the current date and time if not set
if(!$timestamp)
{
$timestamp = time();
}
// First calculate the first timestamp for the starting week of the year, using our nonstandard one
$first_day_timestamp = 1 + ((7 + $start_of_week - strftime("%w", @mktime(0,0,0,1,1,date('Y', $timestamp)))) %7);
$first_day_timestamp = @mktime(0,0,0,1, $first_day_timestamp, date('Y', $timestamp));
$time_elapsed = $timestamp - $first_day_timestamp;
$days_elapsed = $time_elapsed / 86400;
$week_number = ceil($days_elapsed / 7);
return $week_number; }
// Fill in the missing weeks in the week count function
fill_weeks($week_count, $mini, $maxi) {
// Looping through the array and filling in the missing weeks
for($i = $mini; $i <= $maxi; $i++)
{
if(!isset($week_count[$i]))
{
$week_count[$i] = 0;
}
}
ksort($week_count);
return $week_count; }
$sql = "SELECT bits.type,
bitstatus.main_stop FROM bits JOIN bitstatus
ON bits.serial = bitstatus.bs_serial WHERE bitstatus.status = 'Done' AND YEAR(bitstatus.main_stop) = '2015'"; //Create year changer
$result = mysql_query($sql) or die(mysql_error());
$count = array(); $legend = array(); while($row =
mysql_fetch_assoc($result)) {
$week = (calculate_week_number(strtotime($row['main_stop']) + (8 * 3600), 6) + 1);
$count[$row['type']][$week] += 1;
$legend[$week] = 0;
if(!isset($min_week))
{
$min_week = $week;
}
else
{
if($week < $min_week)
{
$min_week = $week;
}
}
if(!isset($max_week))
{
$max_week = $week;
}
else
{
if($week > $max_week)
{
$max_week = $week;
}
} } $legend = array_unique($legend); $legend = fill_weeks($legend, $min_week, $max_week); ?> <!DOCTYPE HTML> <html> <head> <meta
http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bits Created per Week</title>
<script type="text/javascript"
src="../../../../../../../jQueryAssets/jquery-1.8.3.min.js"></script>
<style type="text/css"> ${demo.css} </style> <script
type="text/javascript"> $(function () {
$('#container').highcharts({
chart: {
type: 'column'
}, plotOptions: {
column: {
colorByPoint: true
}
},
colors: [
<?php
$num_counts = count($count);
$on = 1;
foreach($count as $bit )
{
if($on != $num_counts)
{
if($bit == 'STEEL'){echo"'#FF9999'";}
else if($bit == 'STEEL CROWN'){echo"'#FF9999'";}
else if($bit == 'SLIM'){echo"'#9999FF'";}
else if($bit == 'KYMERA'){echo"'#FF2626'";}
else if($bit == 'HYBRID'){echo"'#FF2626'";}
else if($bit == 'EZC'){echo"'#FFFF26'";}
else if($bit == 'EZR'){echo"'#FFFF26'";}
else if($bit == 'EZB'){echo"'#FFFF26'";}
else if($bit == 'EZS'){echo"'#FFFF26'";}
else if($bit == 'RWD'){echo"'#FF9326'";}
echo ",\n";
}
$on++;
}
?>
],
title: {
text: 'Bits Created by Type'
},
xAxis: {
categories: [<?php echo implode(',', array_keys($legend)); ?>]
},
yAxis: {
min: 0,
title: {
text: 'Bits Created'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [{ <?php $num_counts = count($count); $on = 1; foreach($count as $bit => $bit_counts) {
echo " name: '$bit',\n";
$bit_counts = fill_weeks($bit_counts, $min_week, $max_week);
echo ' data: [' . implode(',', $bit_counts) . "]\n";
if($on != $num_counts)
{
echo " }, {\n";
}
$on++; } ?>
}]
}); }); </script> </head> <body> <script src="js/highcharts.js"></script> <script
src="js/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0
auto"></div>
</body> </html>
我终于想出了如何让它发挥作用
colors: [
<?php
$num_counts = count($count);
$on = 1;
foreach($count as $bit => $bit_counts)
{
if($bit == 'STEEL'){echo"'#FF9999'";}
else if($bit == 'STEEL CROWN'){echo"'#FF9999'";}
else if($bit == 'SLIM'){echo"'#9999FF'";}
else if($bit == 'KYMERA'){echo"'#FF2626'";}
else if($bit == 'HYBRID'){echo"'#FF2626'";}
else if($bit == 'EZC'){echo"'#FFFF26'";}
else if($bit == 'EZR'){echo"'#FFFF26'";}
else if($bit == 'EZB'){echo"'#FFFF26'";}
else if($bit == 'EZS'){echo"'#FFFF26'";}
else if($bit == 'RWD'){echo"'#FF9326'";}
if($on != $num_counts)
{
echo ",\n";
}
$on++;
}
?>
],
我正在尝试获取从 bit.type 中提取的数据以显示为特定颜色。
我在正确提取名称并将其显示在系列下的地方得到它。
这可能不会显示所有代码,因为它是正确的 link。 Full code
<?php // Initialize require_once('../../../data.php');
function calculate_week_number($timestamp = 0, $start_of_week = 0) {
// Use the current date and time if not set
if(!$timestamp)
{
$timestamp = time();
}
// First calculate the first timestamp for the starting week of the year, using our nonstandard one
$first_day_timestamp = 1 + ((7 + $start_of_week - strftime("%w", @mktime(0,0,0,1,1,date('Y', $timestamp)))) %7);
$first_day_timestamp = @mktime(0,0,0,1, $first_day_timestamp, date('Y', $timestamp));
$time_elapsed = $timestamp - $first_day_timestamp;
$days_elapsed = $time_elapsed / 86400;
$week_number = ceil($days_elapsed / 7);
return $week_number; }
// Fill in the missing weeks in the week count function
fill_weeks($week_count, $mini, $maxi) {
// Looping through the array and filling in the missing weeks
for($i = $mini; $i <= $maxi; $i++)
{
if(!isset($week_count[$i]))
{
$week_count[$i] = 0;
}
}
ksort($week_count);
return $week_count; }
$sql = "SELECT bits.type,
bitstatus.main_stop FROM bits JOIN bitstatus
ON bits.serial = bitstatus.bs_serial WHERE bitstatus.status = 'Done' AND YEAR(bitstatus.main_stop) = '2015'"; //Create year changer
$result = mysql_query($sql) or die(mysql_error());
$count = array(); $legend = array(); while($row =
mysql_fetch_assoc($result)) {
$week = (calculate_week_number(strtotime($row['main_stop']) + (8 * 3600), 6) + 1);
$count[$row['type']][$week] += 1;
$legend[$week] = 0;
if(!isset($min_week))
{
$min_week = $week;
}
else
{
if($week < $min_week)
{
$min_week = $week;
}
}
if(!isset($max_week))
{
$max_week = $week;
}
else
{
if($week > $max_week)
{
$max_week = $week;
}
} } $legend = array_unique($legend); $legend = fill_weeks($legend, $min_week, $max_week); ?> <!DOCTYPE HTML> <html> <head> <meta
http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bits Created per Week</title>
<script type="text/javascript"
src="../../../../../../../jQueryAssets/jquery-1.8.3.min.js"></script>
<style type="text/css"> ${demo.css} </style> <script
type="text/javascript"> $(function () {
$('#container').highcharts({
chart: {
type: 'column'
}, plotOptions: {
column: {
colorByPoint: true
}
},
colors: [
<?php
$num_counts = count($count);
$on = 1;
foreach($count as $bit )
{
if($on != $num_counts)
{
if($bit == 'STEEL'){echo"'#FF9999'";}
else if($bit == 'STEEL CROWN'){echo"'#FF9999'";}
else if($bit == 'SLIM'){echo"'#9999FF'";}
else if($bit == 'KYMERA'){echo"'#FF2626'";}
else if($bit == 'HYBRID'){echo"'#FF2626'";}
else if($bit == 'EZC'){echo"'#FFFF26'";}
else if($bit == 'EZR'){echo"'#FFFF26'";}
else if($bit == 'EZB'){echo"'#FFFF26'";}
else if($bit == 'EZS'){echo"'#FFFF26'";}
else if($bit == 'RWD'){echo"'#FF9326'";}
echo ",\n";
}
$on++;
}
?>
],
title: {
text: 'Bits Created by Type'
},
xAxis: {
categories: [<?php echo implode(',', array_keys($legend)); ?>]
},
yAxis: {
min: 0,
title: {
text: 'Bits Created'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [{ <?php $num_counts = count($count); $on = 1; foreach($count as $bit => $bit_counts) {
echo " name: '$bit',\n";
$bit_counts = fill_weeks($bit_counts, $min_week, $max_week);
echo ' data: [' . implode(',', $bit_counts) . "]\n";
if($on != $num_counts)
{
echo " }, {\n";
}
$on++; } ?>
}]
}); }); </script> </head> <body> <script src="js/highcharts.js"></script> <script
src="js/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0
auto"></div>
</body> </html>
我终于想出了如何让它发挥作用
colors: [
<?php
$num_counts = count($count);
$on = 1;
foreach($count as $bit => $bit_counts)
{
if($bit == 'STEEL'){echo"'#FF9999'";}
else if($bit == 'STEEL CROWN'){echo"'#FF9999'";}
else if($bit == 'SLIM'){echo"'#9999FF'";}
else if($bit == 'KYMERA'){echo"'#FF2626'";}
else if($bit == 'HYBRID'){echo"'#FF2626'";}
else if($bit == 'EZC'){echo"'#FFFF26'";}
else if($bit == 'EZR'){echo"'#FFFF26'";}
else if($bit == 'EZB'){echo"'#FFFF26'";}
else if($bit == 'EZS'){echo"'#FFFF26'";}
else if($bit == 'RWD'){echo"'#FF9326'";}
if($on != $num_counts)
{
echo ",\n";
}
$on++;
}
?>
],