Question

我有一个脚本调用MySQl数据表中的数据并在HighCharts图表中使用它。我有这个工作正常，但我想从名为“uniqueid”的数据表中添加另一个变量（字段）。

脚本1号;

$categories = array();
$categories['name'] = 'Room';

$rows1 = array();
$rows1['name'] = 'Temp C';

$uniqueid = array();
$uniqueid['name'] = 'UniqueID';

while($row_AvgWaterTemp = mysql_fetch_assoc($AvgWaterTemp)) {
    $categories['data'][] = $row_AvgWaterTemp['Room'];
    $rows1['data'][] = $row_AvgWaterTemp['SeqID1306'];
    $uniqueid['data'][] = $row_AvgWaterTemp['UniqueID']; // NEW FIELD
}
$result = array();

array_push($result,$categories);
array_push($result,$rows1);
array_push($result,$uniqueid); // NEW FIELD

我还有一个脚本调用脚本1并生成图表：

脚本2号

$(function () {

var categories=[];
   var data =[];

 var chart;
$(document).ready(function() {

    $.getJSON("../charts/chart.php", function(json) { 
    $.each(json,function(i,el) { 
      if (el.name=="Room") 
        categories = el.data; 
        else data.push(el); 
        });


        $('#container1').highcharts({
            chart: {
                renderTo: 'container',
                type: 'line',
                zoomType: 'x',
                marginTop: 40,
                marginRight: 30,
                marginBottom: 50,
                plotBackgroundColor: '#FCFFC5'
            },
            title: {
                text: 'Room hot water temperatures ',
                x: -20, //center
                style: {
                fontFamily: 'Tahoma',
                color: '#000000',
                fontWeight: 'bold',
                fontSize: '10px'
                }
            },
            subtitle: {
                text: 'Zoom: hold cursor over chart, hold left mouse button and drag, release button',
                x: -20
            },
             xAxis: {
                 categories: categories,

                    labels: {
                        enabled: false
                    }
            },

            yAxis: {



                plotLines: [{
                value: '<?php echo $row_Rooms['Hotmax'];?>',
                color: '#FF0000',
                width: 1,
                zIndex: 10,
                label: {
                            text: 'Maximum <?php echo $row_Rooms['Hotmax'];?> °C',
                            align: 'center',
                            x: -10,
                            y: -5,
                                style: {
                                    color: '#FF0000'
                                }
                            }
                }, {
                 value: '<?php echo $row_Rooms['HotMin'];?>',
                color: '#0000CC',
                width: 1,
                zIndex: 10,
                label: {
                            text: 'Minimum <?php echo $row_Rooms['HotMin'];?> °C',
                            align: 'center',
                            x: -10,
                            y: 20,
                                style: {
                                    color: '#0000CC'
                                }
                            }
                 }],



                showFirstLabel: false,
                lineColor:'#999',
                lineWidth:0.2,
                tickColor:'#666',
                tickWidth:1,
                tickLength:2,
                tickInterval: 10,
                gridLineColor:'#ddd',
                title: {
                    text: 'Temperature °C',
                    style: {
                fontFamily: 'Tahoma',
                color: '#000000',
                fontWeight: 'bold',
                fontSize: '10px'
                }
                },


                },

                legend: {
                     enabled: false,
                itemStyle: {
                    font: '11px Trebuchet MS, Verdana, sans-serif',
                    color: '#000000'
                },
                 itemHoverStyle: {
                color: '#000000'
                },
                itemHiddenStyle: {
                 color: '#444'
                }

                },

                colors: [
                '#009900', 

            ],

                plotOptions: {
                    style: { textShadow: false },
                    column: {
                        color:'#ff00ff'
                    },



                series: {

                    cursor: 'pointer',
                    point: {
                    events: {
                    click: function() {
                        window.top.location.href = "../chart_click_hot_water.php?room=" + this.category;

                    }
                }
                },  



                    lineWidth: 1,
                    dataLabels: {
                    enabled: false,
                    rotation: 0,
                    color: '#000000',
                    align: 'center',
                    //format: '{point.y:.1f}', // one decimal
                    y: 0, // 10 pixels down from the top
                    style: {
                        textShadow: false,
                        fontSize: '10px',
                        fontFamily: 'Verdana, sans-serif'
                        }
                    }
                }

            },

            tooltip: {

                enabled: true,
                crosshairs: [false, true],
                positioner: function () {
                    return { x: 5, y: -5 };
                },
                shadow: false,
                borderWidth: 0,
                backgroundColor: 'rgba(255,255,255,0.8)',
                formatter: function () {
                    return 'Room: <b>' + this.x +
                '</b> is <b>' + this.y + ' °C</b>';
                }
            },



            credits: {
                enabled: false
            },


            series: data
        });
    });

});

});

我的问题是，如何在“点击”功能中包含新字段“uniqueid”并使用：

 click: function() {
      window.top.location.href ="../chart_click_hot_water.php?uniqueid=" + this.category;
}

目前我有“工具提示”显示房间号和水温但是当我在脚本1中包含附加字段时，工具提示只显示房间，并显示“未完成”的观察者温度。

是否有可能从数据表中调用其他字段并在我的点击功能中使用它，如果是这样，我该怎么做。

非常感谢您的帮助和时间。

干杯。

更新：

我有以下

$.getJSON("../charts/imaint_water_avg_temp_chart.php", function(json) { 
    $.each(json,function(i,el) { 
      if (el.name=="Room") 
        categories = el.data;
      else if (el.name=="UniqueID")  {
        uniqueid = el.data;
      } else data.push(el); 
      });

然后 console.log（uniqueid，“UniqueID”）;我在日志中看到了UniqueID。

然后我有：

series: {
cursor: 'pointer',
point: {
   events: {
   click: function() {
        window.top.location.href = "../imaint_chart_click_hot_water.php?room=" + this.uniqueid;
}
}
},

但是？room =没有填充。

你或其他任何人都知道我哪里出错了。感谢

Answer 1

使用this.index，您将获得数据的索引号，您可以使用该号码通过uniqueid[this.index]获取UniqueID。

提示有了额外的数据字段，我建议您将数据表示为list of objects with named values。它可以提供更多的结构和可读性。

您的数据可能如下所示：

[{ uniqueid: 'GLAZH03431464336298', room: '343', y:'50' },{ uniqueid: 'GLAZH04051465483111', room: '405', y:'50' }]

您可以遵循自己的直觉并使用this.uniqueid或this.room等。

带有命名值的对象列表的示例

PHP脚本看起来像这样（未经测试）：

$data = array(); while($row_AvgWaterTemp = mysql_fetch_row($AvWaterTemp)){ $temp = array( "uniqueid" => $row_AvgWaterTemp['UniqueID'], "room" => $row_AvgWaterTemp['Room'], "y" => $row_AvgWaterTemp['SeqID1306'] ); array_push($data,$temp); } $result = array(); array_push($result,$data); echo json_encode($result); // Printing it out as json

你原来的旧JS代码是一样的。
祝你好运！

HighCharts添加另一个变量

1 个答案: