javascript - Highchart Single Legend 控制多个图表

标签 javascript html highcharts

我使用 Highcharts 来呈现数据。目前我有一个图表显示每月、每年、每周的数据，另一个图表显示 24 小时。我想要的是有一个控制两个图表的图例。在谷歌搜索解决方案时，我发现了这个 http://jsfiddle.net/teEQ3/这似乎有效，但由于我对 javascript 还很天真，所以我可以弄清楚如何在我的运行脚本中实现此代码。

这是我的图表 1 的 javascript 代码

<script type="text/javascript">

            $(document).ready(function() {
              var buttons = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
                var options = {
                    chart: {
                        renderTo: 'mylineChart',
                        defaultSeriesType: 'line',
                        spacingLeft : 60,
                        zoomType: 'x'

                    },
                    title: {
                        text: 'TPV Line Chart Data',
                        x: -20 //center
                    },
                     rangeSelector:{
                        enabled:true,
                        buttons: [{
                        type: 'month',
                        count: 1,
                        text: '1m'
                      }, {
                        type: 'month',
                        count: 6,
                        text: '6m'
                      }, {
                        type: 'year',
                        count: 1,
                        text: '1y'
                      }, {
                        type: 'all',
                        count: 1,
                        text: 'all'
                      }],
                        spacingBottom: 40
                    },
                    subtitle: {
                        text: '',
                        x: -20
                    },
                    xAxis: {
                       gridLineWidth: 0,
                        type: 'datetime',
                     dateTimeLabelFormats: {
                                month: '%b %e, %Y',
                                year: '%Y'
                             }

                    },
                    credits: {
      enabled: false
  },
     yAxis: [<?php echo join($ylabel, ',') ?>],
        tooltip: {
            shared: true
        },
        legend: {
            color: 'white',
            layout: 'vertical',
            align: 'left',
            x: -60,
            itemHiddenStyle: {
            color: "#777"
        },
            verticalAlign: 'top',
            y: 5,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },

       exporting: {
            buttons: {
                contextButton: {
                    enabled: false
                },
                exportButton: {
                    text: 'Download',
                     theme: {
                        fill: '#eee',
                        stroke: '#fff',
                        states: {
                            hover: {
                                fill: '#fff',
                                stroke: '#eee'
                            },
                            select: {
                                fill: '#ddd',
                                stroke: '#0f0'
                            }
                        }
                    },
                    _titleKey: 'contextButtonTitle',
                    // Use only the download related menu items from the default context button
                    menuItems:buttons.slice(2)
                },
                printButton: {
                    text: 'Print',
                     theme: {
                        fill: '#eee',
                        stroke: '#fff',
                        states: {
                            hover: {
                                fill: '#fff',
                                stroke: '#eee'
                            },
                            select: {
                                fill: '#ddd',
                                stroke: '#0f0'
                            }
                        }
                    },
                    _titleKey: 'printChart',
                    onclick: function () {
                        this.print();
                    }
                }
            }
        },
        series: [<?php echo join($arr, ',') ?>],
                }
                <?php
                $i = 0 ; 
                $check_temperature = "SELECT * FROM temperature_setting WHERE device_key = '".$session_row['device_key']."'";
                $ans = $conn->query($check_temperature);
                while($check = $ans->fetch_assoc()){
                    $check_temp_id = $check['temp_id'];
                    $check_is_active = $check['is_active'];

                for ($j = 1; $j <=15; $j++){
                if($check_temp_id == 'temp'.$j.'' && $check_is_active == 1){
                ?>
                myfunction(<?php echo $i++; ?>, 'lineData/tempdata<?php echo $j; ?>.php');

                <?php } 


                } 
            }

                $check_pulse = "SELECT * FROM pulse_setting WHERE device_key = '".$session_row['device_key']."'";
                $ans2 = $conn->query($check_pulse);
                while($check2 = $ans2->fetch_assoc()){
                    $check_pulse_id = $check2['pulse_id'];
                    $check_is_active = $check2['is_active'];

                for ($k = 1; $k <=8; $k++){
                if($check_pulse_id == 'pulse'.$k.'' && $check_is_active == 1){
                ?>
                myfunction(<?php echo $i++; ?>, 'lineData/pulsedata<?php echo $k; ?>.php');

                <?php } 
            }

            }


                $check_volt = "SELECT * FROM volt_setting WHERE device_key = '".$session_row['device_key']."'";
                $ans3 = $conn->query($check_volt);
                while($check3 = $ans3->fetch_assoc()){
                    $check_volt_id = $check3['volt_id'];
                    $check_is_active = $check3['is_active'];

                 for ($v = 1; $v <=4; $v++){
                if($check_volt_id == 'volt'.$v.'' && $check_is_active == 1){

                ?>
                myfunction(<?php echo $i++; ?>, 'lineData/voltdata<?php echo $v; ?>.php');
                <?php } 
                }

            }
                ?>





                function myfunction(ind, some_file) {
                    jQuery.get(some_file, null, function(tsv) {
                    var lines = [];
                    traffic = [];
                    try {
                        // split the data return into lines and parse them
                        tsv = tsv.split(/\n/g);
                        jQuery.each(tsv, function(i, line) {
                            line = line.split(/\t/);
                            date = Date.parse(line[0] +' UTC');
                            traffic.push([
                                date,
                                parseInt(line[1].replace(',', ''), 10)
                            ]);
                        });
                    } catch (e) {  }
                    options.series[ind].data = traffic;
                    chart = new Highcharts.Chart(options);
                });
 }

            });
</script>

图表 2

<script type="text/javascript">

    var mychart;
            $(document).ready(function() {
               var buttons = Highcharts.getOptions().exporting.buttons.contextButton.menuItems;
                var options = {
                    chart: {
                        renderTo: 'box',
                        defaultSeriesType: 'line',
                        spacingLeft : 60,
                        zoomType: 'x'

                    }, title: {
                        text: 'TPV Line Chart Data',
                        x: -20 //center
                    },

                    subtitle: {
                        text: '',
                        x: -20
                    },

                    xAxis: {
                    type: 'datetime',
                    tickInterval: 3600 * 1000, // one hour
                    tickWidth: 0,
                    gridLineWidth: 0,
                    labels: {
                      align: 'center',
                      x: -3,
                      y: 20,
                      formatter: function() {
                        return Highcharts.dateFormat('%l%p', this.value);
                      }
                    }
                  },

                    credits: {
      enabled: false
  },

     yAxis: [<?php echo join($ylabel, ',') ?>],

        legend: {
            color: 'white',
            layout: 'vertical',
            align: 'left',
            x: -60,
            itemHiddenStyle: {
            color: "#777"
        },
            verticalAlign: 'top',
            y: 5,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },/*
         plotOptions: {
            series: {
                events: {
                    legendItemClick: function (event) {
                        var XYZ = $('#mylineChart').highcharts(),
                            series = XYZ.get(this.options.id); //get corresponding series

                        if (series) {
                            if (this.visible) {
                                series.hide();
                            } else {
                                series.show();
                            }
                        }
                    }
                }
            }
        },
      */
       exporting: {
            buttons: {
                contextButton: {
                    enabled: false
                },
                exportButton: {
                    text: 'Download',
                     theme: {
                        fill: '#eee',
                        stroke: '#fff',
                        states: {
                            hover: {
                                fill: '#fff',
                                stroke: '#eee'
                            },
                            select: {
                                fill: '#ddd',
                                stroke: '#0f0'
                            }
                        }
                    },
                    _titleKey: 'contextButtonTitle',
                    // Use only the download related menu items from the default context button
                     menuItems:buttons.slice(2)
                },
                printButton: {
                    text: 'Print',
                     theme: {
                        fill: '#eee',
                        stroke: '#fff',
                        states: {
                            hover: {
                                fill: '#fff',
                                stroke: '#eee'
                            },
                            select: {
                                fill: '#ddd',
                                stroke: '#0f0'
                            }
                        }
                    },
                    _titleKey: 'printChart',
                    onclick: function () {
                        this.print();
                    }
                }
            }
        },
        series: [<?php echo join($arr, ',') ?>],
                }
                <?php
                $i = 0 ; 
                $check_temperature = "SELECT * FROM temperature_setting WHERE device_key = '".$session_row['device_key']."'";
                $ans = $conn->query($check_temperature);
                while($check = $ans->fetch_assoc()){
                    $check_temp_id = $check['temp_id'];
                    $check_is_active = $check['is_active'];

                for ($j = 1; $j <=15; $j++){
                if($check_temp_id == 'temp'.$j.'' && $check_is_active == 1){
                ?>
                myfunction(<?php echo $i++; ?>, 'lineData/hourly_tempdata<?php echo $j; ?>.php');

                <?php } 


                } 
            }

                $check_pulse = "SELECT * FROM pulse_setting WHERE device_key = '".$session_row['device_key']."'";
                $ans2 = $conn->query($check_pulse);
                while($check2 = $ans2->fetch_assoc()){
                    $check_pulse_id = $check2['pulse_id'];
                    $check_is_active = $check2['is_active'];

                for ($k = 1; $k <=8; $k++){
                if($check_pulse_id == 'pulse'.$k.'' && $check_is_active == 1){
                ?>
                myfunction(<?php echo $i++; ?>, 'lineData/hourly_pulsedata<?php echo $k; ?>.php');

                <?php } 
            }

            }


                $check_volt = "SELECT * FROM volt_setting WHERE device_key = '".$session_row['device_key']."'";
                $ans3 = $conn->query($check_volt);
                while($check3 = $ans3->fetch_assoc()){
                    $check_volt_id = $check3['volt_id'];
                    $check_is_active = $check3['is_active'];

                 for ($v = 1; $v <=4; $v++){
                if($check_volt_id == 'volt'.$v.'' && $check_is_active == 1){

                ?>
                myfunction(<?php echo $i++; ?>, 'lineData/hourly_voltdata<?php echo $v; ?>.php');
                <?php } 
                }

            }
                ?>



                function myfunction(ind, some_file) {
                    jQuery.get(some_file, null, function(tsv) {
                    var lines = [];
                    traffic = [];
                    try {
                        // split the data return into lines and parse them
                        tsv = tsv.split(/\n/g);
                        jQuery.each(tsv, function(i, line) {
                            line = line.split(/\t/);
                            date = Date.parse(line[0] +' UTC');
                            traffic.push([
                                date,
                                parseInt(line[1].replace(',', ''), 10)
                            ]);
                        });
                    } catch (e) {  }
                    options.series[ind].data = traffic;
                    chart = new Highcharts.Chart(options);
                });
 }

            });
</script>

这就是我得到的电流 Chart1 Chart2

最佳答案

如果您能很好地阅读 API 文档，这将非常简单。 您所要做的就是使系列 ID 与其他图表相同，并让第二个图表图例处理控件。见下文:

$(function () {
    $('#container1').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        legend: {
            enabled: false
        },
	
        series: [{
            id: 'someId',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        },{
            id: 'someId_',
            data: [30.0, 51.5, 206.4, 529.2, 44.0, 76.0, 335.6, 148.5, 216.4, 294.1, 92.6, 60.2]
        }]
    });
    $('#container2').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                events: {
                    legendItemClick: function (event) {
                        var XYZ = $('#container1').highcharts(),
                            series = XYZ.get(this.options.id); //get corresponding series
												
                        if (series) {
                            if (this.visible) {
                                series.hide();
                            } else {
                                series.show();
                            }
                        }
                    }
                }
            }
        },

        series: [{
            id: 'someId',
            name: 'Series 1',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        },{
            id: 'someId_',
            name: 'Series 2',
            data: [30.0, 51.5, 206.4, 529.2, 44.0, 76.0, 335.6, 148.5, 216.4, 294.1, 92.6, 60.2]
        }]
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="height: 300px"></div>
<div id="container2" style="height: 300px"></div>

关于javascript - Highchart Single Legend 控制多个图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42481281/

上一篇：javascript - 涉及display属性时其他属性的硬过渡

下一篇：javascript - 切换jquery没有逆转

相关文章：

javascript - 如何将文本从一页重复到另一页以减少每月更新的时间

javascript - 如何检查元素是否具有指定类以外的类？

javascript - Highcharts - 强制绘图线消耗可用宽度？

javascript - HighCharts pointRange chop 宽度。这是 HighCharts 的错误还是我遗漏了什么？

javascript - 如何使用 Alexa 编写决策树？

javascript - 在javascript中访问超出其大小的数组

javascript - CSS3 动画点击

javascript - Highcharts -- 隐藏零值而不使用 'null'

javascript - jQuery 将元素添加到先前定义的事件处理程序

javascript - 修改backbone.js中的 View 元素时模型不会改变

©2024 IT工具网  联系我们