Highcharts Drilldown 图表 CodeIgniter

Question

我正在开发一个在 CodeIgniter 框架中构建的 PHP 项目。此应用程序包含许多动态创建的图表。我与ronan-gloo highcharts library 合作取得了巨大成功。下面是生成我的图表的代码...

$this -> load -> library ( 'Highchart' );
$chart = new Highchart ( );

$chart -> chart -> renderTo = "divid";
$chart -> title -> text = "chart Title";
$chart -> xAxis -> categories = $xaxis;

$chart -> tooltip -> formatter = new HighchartJsExpr ( "function() {
                    var s;
                    if (this.point.name) { // the pie chart
                        s = ''+
                        this.point.name +': '+ this.y;
                    } else {
                        s = '<b>'+ this.series.name +'</b><br/><i>' + this.x +'</i>: <b>'+ this.y + '%</b>';
                    }
                    return s; }" );

$chart -> series [ ] = array (
    'type' => "column" ,
    'name' => "%age" ,
    'data' => $yaxis ,
    'color' => '#CC004B' ,
    'showInLegend' => TRUE ,
    'dataLabels' => array (
        'enabled' => TRUE ,
        'color' => '#CC004B' ,
        'style' => array (
            'fontSize' => '10px' ,
            'verticalalign' => 'bottom'
        )
    )
);

foreach ( $chart->getScripts() as $script ) {
    echo '<script type="text/javascript" src="' . $script . '"></script>';
}

echo "<script src='" . base_url ( ) . "assets/js/jquery.cookie.js'></script>";
echo "<script type='text/javascript' src='" . base_url ( ) . "assets/highcharts/js/exporting.js'></script>";
echo "<div id='divid'></div>";
echo "<script type='text/javascript'>" . $chart -> render ( "chart1" ) . "</script>";

这有助于我在更大范围内创建图表，但是，Highcharts 有一个很棒的向下钻取功能 (High Charts Drilldown demo)，我希望在我的项目中实现它。

该演示建议创建包含向下钻取数据 (JS Fiddle) 的 javascript 对象，该对象被调用以创建图表。但是当 javascript 是动态编写的时，我怎么能在 PHP Codeigniter 中做到这一点......

请帮忙！

Answer 1

我能够解决上述问题。下面是我用过的代码...

$this -> load -> library ( 'Highchart' );

        $chart = new Highchart ( );

        $chart -> chart -> renderTo = "chartcontainer";
        $chart -> title -> text = "Chart Title";
        $chart -> chart -> type = "column";
        $chart -> subtitle -> text = "Click the columns to view Drilldown. Click again to view main chart.";
        $chart -> xAxis -> categories = $xaxis;
        $chart -> yAxis -> title -> text = "%age";
        $chart -> chart -> plotShadow = TRUE;
        $chart -> chart -> plotBorderWidth = 1;

        $chart -> chart -> plotBackgroundColor = "#F0F0F0";

        $pcolumn = $chart -> plotOptions -> column;
        $pcolumn -> cursor = "pointer";
        $xaxisjson = json_encode ( $xaxis );
        $pcolumn -> point -> events -> click = new HighchartJsExpr ( "function() {
                                var drilldown = this.drilldown;
                                if (drilldown) { // drill down
                                    setChart(drilldown.name, drilldown.categories, drilldown.data, '#FA7070');
                                } else { // restore
                                    setChart('Repeat %age', $xaxisjson, $drilldowndata);
                                }

                                function setChart(name, categories, data, color) {
                                    chart2.xAxis[0].setCategories(categories, false);
                                    chart2.series[0].remove(false);
                                    chart2.addSeries({
                                        name: name,
                                        data: data,
                                        color: color || '#7070FA'
                                    }, false);
                                    chart2.redraw();
                                }
                            }" );

        $pcolumn -> dataLabels = array (
            "enabled" => true ,
            "style" => array ( "fontWeight" => "bold" ) ,
            "formatter" => new HighchartJsExpr ( "function() {
                            return this.y +'%';
                        }" )
        );

        $chart -> tooltip -> formatter = new HighchartJsExpr ( "function() {
                    var point = this.point,
                        s = this.x +':<b>'+ this.y +'%</b> Repeat E-Mails<br/>';
                    if (point.drilldown) {
                        s += 'Click to view '+ point.category +'\'s drilldown data';
                    } else {
                        s += 'Click to return to main graph';
                    }
                    return s;
                }" );

        $chart -> series [ ] = array (
            "name" => "Series Name" ,
            "data" => $drilldowndata [ "data" ]
        );

        foreach ( $chart->getScripts() as $script ) {
            echo '<script type="text/javascript" src="' . $script . '"></script>';
        }

        echo "<script src='" . base_url ( ) . "assets/js/jquery.cookie.js'></script>";
        echo "<script type='text/javascript' src='" . base_url ( ) . "assets/highcharts/js/exporting.js'></script>";
        echo "<div id='chartcontainer'></div>";
        echo "<script type='text/javascript'>" . $chart -> render ( "chart2" ) . "</script>";

数组 $drilldown 格式如下：

Array
(
    [data] => Array
        (
            [0] => Array
                (
                    [y] => 18.5
                    [drilldown] => Array
                        (
                            [name] => Category0
                            [categories] => Array
                                (
                                    [0] => 01-Jul
                                    [1] => 02-Jul
                                    [2] => 03-Jul
                                )
                            [data] => Array
                                (
                                    [0] => 27
                                    [1] => 14.4
                                    [2] => 9.7
                                )
                            [color] => #7070FA
                        )
                )
            [1] => Array
                (
                    [y] => 15.6
                    [drilldown] => Array
                        (
                            [name] => Category1
                            [categories] => Array
                                (
                                    [0] => 01-Jul
                                    [1] => 02-Jul
                                    [2] => 03-Jul
                                )
                            [data] => Array
                                (
                                    [0] => 20
                                    [1] => 16.1
                                    [2] => 0
                                )
                            [color] => #7070FA
                        )
                )
            [2] => Array
                (
                    [y] => 21.5
                    [drilldown] => Array
                        (
                            [name] => Category2
                            [categories] => Array
                                (
                                    [0] => 01-Jul
                                    [1] => 02-Jul
                                    [2] => 03-Jul
                                )
                            [data] => Array
                                (
                                    [0] => 20.6
                                    [1] => 24.3
                                    [2] => 17.9
                                )

                            [color] => #7070FA
                        )

                )
            [3] => Array
                (
                    [y] => 10
                    [drilldown] => Array
                        (
                            [name] => Category3
                            [categories] => Array
                                (
                                    [0] => 01-Jul
                                    [1] => 02-Jul
                                    [2] => 03-Jul
                                )
                            [data] => Array
                                (
                                    [0] => 13.8
                                    [1] => 11.5
                                    [2] => 4
                                )
                            [color] => #7070FA
                        )
                )
        )
)

欢迎在 cmets 中提出任何建议或帮助