如何将另一个变量传递给应该是动态的Highchart基本行

时间：2014-09-05 13:19:40

标签： javascript php jquery highcharts

我正在尝试将基本行highcharts做为动态，我已经完成了动态，现在要求我想将另一个变量传递给其他列的X轴变量，这是我在PHP中的代码脚本：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>RNA</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
         <script type="text/javascript" src="regression.js"></script>
          <script type="text/javascript" src="highcharts.js"></script>
        <script type="text/javascript">

$(function () {


 var sourceData = [ 

                    <?php

                        if (($handle = fopen("data.csv", "r")) !== FALSE) {

                            $i=0;

                            $len = count(file('data.csv'));

                            while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {

                                    if($i==$len - 1){

                                        echo "{y: ".$i.",".$data[1].", extprop: '".$data[4]."'}";

                                        }else{

                                        echo "{y: ".$i.",".$data[1].", extprop: '".$data[4]."'}," ;

                                        }

                                $i++;
                            }
                                fclose($handle);
                            }
                ?>

                ];

        $('#container').highcharts({
            title: {
                text: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
                x: -20 //center
            },

        tooltip: {
                    formatter: function () {
                        console.log(this.point.extprop);
                        var s = 'The value for <b>' + this.x +
                            '</b> is <b>' + this.y + '</b>';
                        if (this.point.extprop) {
                           s += 'for <b>' + this.point.extprop + '</b>';
                        }
                        return s;
                    }
                },


            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: [

            <?php   
                 if (($handle = fopen("data.csv", "r")) !== FALSE) {
            $i=0;

            while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {

                        if($i==$len - 1){

                                echo "'".$data[0]."'" ;

                        }else{
                                echo "'".$data[0]."'," ;
                        }

                $i++;
            }
                fclose($handle);
            }

            ?>  

            ]},
            yAxis: {
                title: {
                    text: 'Percent'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '%'
            },

            legend: {
                layout: 'vertical',
                //align: 'right',
                //verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'RNA',
                data: sourceData
            },
            {
                type: 'line',
                marker: { enabled: false },
                /* function returns data for trend-line */
                data: (function() {
                  return fitData(sourceData).data;
                })()
            }],
            credits: {
                enabled: false
            }
      });
});

        </script>
        </head>

<body>

<script src="exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    </body>
</html>

这是csv文件：

 17-Jul-14  99.43   99.69   99.86   power issue
    18-Jul-14   99.4    99.64   99.83   flood
    19-Jul-14   99.24   99.63   99.82   power issue
    20-Jul-14   99.4    99.67   99.85   flood
    21-Jul-14   99.21   99.65   99.82   power issue
    22-Jul-14   98.45   99.35   99.53   flood
    23-Jul-14   98.41   99.39   99.56   power issue
    24-Jul-14   99.18   99.6    99.79   flood
    25-Jul-14   99.36   99.66   99.87   power issue
    26-Jul-14   99.31   99.67   99.89   flood
    27-Jul-14   99.38   99.64   99.89   power issue
    28-Jul-14   99.2    99.57   99.76   flood
    29-Jul-14   99.38   99.64   99.84   power issue
    30-Jul-14   99.32   99.63   99.82   flood
    31-Jul-14   99.24   99.61   99.8    power issue
    1-Aug-14    99.38   99.65   99.84   flood

错误：当我在第0行检查元素时

var sourceData = [ 

                {x: 0,y: 0,99.43, extprop: 'power issue'},{x: 1,y: 1,99.40, extprop: 'flood'},{x: 2,y: 2,99.24, extprop: 'power issue'},{x: 3,y: 3,99.40, extprop: 'flood'},{x: 4,y: 4,99.21, extprop: 'power issue'},{x: 5,y: 5,98.45, extprop: 'flood'},{x: 6,y: 6,98.41, extprop: 'power issue'},{x: 7,y: 7,99.18, extprop: 'flood'},{x: 8,y: 8,99.36, extprop: 'power issue'},{x: 9,y: 9,99.31, extprop: 'flood'},{x: 10,y: 10,99.38, extprop: 'power issue'},{x: 11,y: 11,99.20, extprop: 'flood'},{x: 12,y: 12,99.38, extprop: 'power issue'},{x: 13,y: 13,99.32, extprop: 'flood'} ];                    ];

这是没有鼠标的图表：http://api.highcharts.com/highcharts#series.data

在弹出的时候，鼠标悬停在日期和值上，根据这个图表正在绘制，现在我想添加弹出的原因即将到来我已经通过源代码循环中的值，如下所示： 

var sourceData = [ 
                <?php
                            if (($handle = fopen("data.csv", "r")) !== FALSE) {
                                $i=0;
                                $len = count(file('data.csv'));
                                while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
                                        if($i==$len - 1){
                                            echo "[".$i.",".$data[1].",".$data[4]."]";
                                            }else{
                                            echo "[".$i.",".$data[1].",".$data[4]."]," ;
                                            }
                                    $i++;
                                }
                                    fclose($handle);
                                }
                    ?>

                ];

但是当我是Inspect元素时我得到的问题：Uncaught SyntaxError：意外的标识符

来自Github的regression.js文件：https://github.com/Tom-Alexander/regression-js

这是屏幕截图：当鼠标悬停时，请在弹出窗口中观察：

enter image description here

当弹出的鼠标出现在图表上的特定点上时，现在我想通过弹出第4列将第4列传递给鼠标，我已尝试在上面的源代码中传递第4列但是我得到了错误;我知道它不会生成图表，但原因必须通过，在哪个日期问题是什么...

请帮忙， 感谢。

这是输出我想通过工具提示中的第4列请注意：

enter image description here

在上图中，工具提示有原因，这就是第4列必须来的原因..请帮助

1 个答案:

答案 0 :(得分：0)

如果您想为数据添加自定义属性，以便在工具提示中显示该属性，则需要添加到sourceData数组中。 Psuedo代码如下：

var sourceData = [ 
                <?php
                            if (($handle = fopen("data.csv", "r")) !== FALSE) {
                                $i=0;
                                $len = count(file('data.csv'));
                                while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
                                        if($i==$len - 1){
                                            echo "{x: ".$i.", y: ".$data[1].", extprop: '".$data[4]."'}";
                                            }else{
                                            echo "{x: ".$i.", y: ".$data[1].", extprop: '".$data[4]."'}," ;
                                            }
                                    $i++;
                                }
                                    fclose($handle);
                                }
                    ?>

                ];

您需要将point object更改为{...}格式，而不是[...]。其中y是yValue，extprop是您想要的某些扩展信息（此属性名称可以是任何非保留名称）。

然后在你的工具提示中你需要添加这个extprop：

tooltip: {
    formatter: function () {
        console.log(this.point.extprop);
        var s = 'The value for <b>' + this.x +
            '</b> is <b>' + this.y + '</b>';
        if (this.point.extprop) {
           s += 'for <b>' + this.point.extprop + '</b>';
        }
        return s;
    }
}
相关问题
最新问题