Highcharts内部或PHP解决方案在x轴上具有相同的年份距离?

时间:2014-01-30 09:08:12

标签: php graph highcharts

我的一些(数百个)变量存在问题,其中大多数年度值只有特定年份的数据。所以,而不是1990,1992,1992,......他们有1990,2000,2005,2010 ......或1990,1995,2000,2005,2008

结果图表显示所有年份之间的距离相同,但在1990,2000,2005,2010的情况下,1990年至2000年之间的距离比以后年份(两倍)大。 Here is an example

现在,我还没有看到任何Highcharts内部解决方案。将指定的参数指定为“在x轴上正确分配年份”本来不错。我想这不存在。

这意味着我需要在PHP中编写代码。对两个阵列(x轴,y轴)进行某种“注入”,这将填充缺失年份的x轴阵列和带有NULL值的y轴阵列。

感谢任何提示!

3 个答案:

答案 0 :(得分:0)

您可以在猜测时在PHP中修复它。我是怎么做到的:

while($row = mysql_fetch_assoc($result,1))
{
    $chartData[$row['date']] = $row['value']; 
    $chartDataDates[$row['date']] = 1;
}
$max_date = max( array_keys( $chartDataDates) );
$min_date = min( array_keys( $chartDataDates) );
for($i=$min_date;$i<$max_date;$i++)
{
    $chartDataDates[$i] = 1;
}
foreach($chartDataDates as $date=>$value)
{
    if(!isset($chartData[$date]))
    $chartData[$date] = 0;
}

并在highcharts参数中:

        xAxis: {categories: ['<?php echo implode("','",array_keys($chartDataDates)); ?>']},
        series: [<?php 
            name: 'my data',
            data: [<?php echo implode(",",$chartData ) ?>]
        }

答案 1 :(得分:0)

感谢提示!

我最终选择了一个更复杂的解决方案,首先检查是否需要额外的计算。如果发生这样的事情。

// categories = years
$cat = "";

for ($j = 0; $j < count($data_x); $j++)
{
    $cat .= "'" . $data_x[$j] . "',";

    // what happens with data like "1990,2000,2005,2008" (id=2199)
    if (($j >= 1) && ($j < (count($data_x) - 1)))
    {
        if (!(($data_x[($j)] - $data_x[($j - 1)]) == ($data_x[($j + 1)] - $data_x[$j])))
        {
            // what to do here?
            $flag_years = true;
        }
    }
}

$cat = substr($cat, 0, -1);

如果是这样,重新计算年份:

// if need to display additional years due to "1990,2000,2005,2008"
if ($flag_years)
{
    $data_x_new = array();

    $min_date = min($data_x);
    $max_date = max($data_x);

    for ($i = $min_date; $i <= $max_date; $i++)
    {
        $data_x_new[($i - $min_date)] = $i;
    }

    $cat = "'" . implode("','", $data_x_new) . "'";

    $numYears = count($data_x_new);
}

然后处理要插入$ data_y中的其他NULL值:

// loop through countries
for ($i = 0; $i < $numCountries; $i++)
{   
    $val = "[";
    $count = 0;

    // loop through values
    for ($j = 0; $j < $numYears; $j++)
    {
        // if need to display additional years due to "1990,2000,2005,2008"
        if ($flag_years)
        {
            if ($data_x_new[$j] == $data_x[($j - $count)])
            {
                $val .= $data_y[$i][($j - $count)] . ",";
            }
            else
            {
                $val .= "null,";
                $count++;
            }
        }
        // otherwise normal display
        else
        {
            if ($data_y[$i][$j] == "")
            {
                $val .= "null,";
            }
            else
            {
                $val .= $data_y[$i][$j] . ",";
            }
        }
    }

    $val = substr($val, 0, -1) . "]";


    // store all in an array        
    $vals[$i] = $val;
}

猜猜有一个更简单的解决方案,但是,嘿,它有效!

答案 2 :(得分:0)

在Highcharts中你需要做的就是“正确”分配年份是使用日期时间轴类型,并将该年份内的实际日期指定为x值

我通常使用1月1日,但只要是每年的相同日期,哪个日期无关紧要。

然后,您只需格式化标签即可将日期显示为年份。

无需循环或计算。

{{编辑:

updated fiddle examplehttp://jsfiddle.net/jlbriggs/6H3jL/2/

另外,如果你想只有x轴标签有数据点,你可以使用tickPositions属性,并为它提供一个与你发送的相同日期时间值的数组作为数据的x值