Highchart單圖例控制多圖表

我已經使用高圖表來呈現數據。目前，我有一張圖表顯示每週，每年，每週的數據，另一張圖表是24小時。我想要的是有一個控制圖表的單個圖例。雖然谷歌搜索解決方案，我發現這似乎是http://jsfiddle.net/teEQ3/工作，但因爲我天真的JavaScript我可以弄清楚如何在我的運行腳本中實現此代碼。Highchart單圖例控制多圖表

這裏是chart1

<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>

的圖表我的javascript代碼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>

這是我得到currenlty

來源

2017-02-27 metalhead101

它，如果你是非常簡單的很好地閱讀API文檔。您所要做的就是讓系列ID與另一個圖表相同，並讓第二個圖表圖例處理該控件。請看下圖：

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

 
     legend: { 
 
      enabled: false 
 
     }, 
 
\t 
 
     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 
 
\t \t \t \t \t \t \t \t \t \t \t \t 
 
         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>

來源

2017-02-27 09:12:03 Roljhon

日Thnx的答案，我知道你答是正確的，而不是$（ '＃container1'）highcharts（{我用這$（文件）。就緒（函數（。。）{ VAR鍵= Highcharts.getOptions（）exporting.buttons.contextButton.menuItems; 變種選項= { 圖表：{ renderTo： 'mylineChart'， defaultSeriesType： '行'， spacingLeft：60， zoomType ：'x' }， – metalhead101

我不知道你將如何做，我不能從我的最終，以及您的代碼包括PHP代碼複製它。但總而言之，你就是這麼做的，只需遵循同樣的事情 – Roljhon

是的，這是條件，無論如何thnx爲你的支持。如果您對如何轉換$（document）.ready（function（）{var buttons = Highcharts.getOptions（）。exporting.buttons.contextButton.menu Items; var options = {chart：{renderTo：'mylineChart '，defaultSeriesType：'line'，spacingLeft：60，zoomType：'x'}，放到$（'＃mylineChart'）中，高效地使用它。 – metalhead101

Highchart單圖例控制多圖表

回答

相關問題