javascript - Bootstrap 中的 Highcharts 导航按钮和全屏按钮

Question

highcharts 导航按钮的功能(打印、导出到 Excel 等)链接到 this 中的 Bootstrap 下拉菜单示例。

在 this例如，链接了具有highcharts重绘功能的全屏按钮，以便图表保持正确的比例。

不幸的是，我无法将两者结合在图表中。请参阅this示例

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-md-6 col-xs-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3>Panel title
            <ul class="list-inline panel-actions">
              <li><a href="#" id="panel-fullscreen" class='fullscreen-btn' role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
            </ul>
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <span class="glyphicon glyphicon-th-large"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#" id="print">Print</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#" id="png">Download PNG</a></li>
                <li><a href="#" id="jpeg">Download JPEG</a></li>
                <li><a href="#" id="pdf">Download PDF</a></li>
                <li><a href="#" id="svg">Download SVG</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#" id="csv">Download CSV</a></li>
                <li><a href="#" id="xls">Download XLS</a></li>
              </ul>
            </div>
          </h3>
        </div>
        <div class="panel-body">
          <div id="container"></div>
        </div>
      </div>
    </div>

    <div class="col-lg-6 col-md-6 col-xs-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3>Panel title
            <ul class="list-inline panel-actions">
              <li><a href="#" id="panel-fullscreen2" class='fullscreen-btn' role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
            </ul>
            <div class="btn-group">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     <span class="glyphicon glyphicon-th-large"></span></button>
              <ul class="dropdown-menu">
                <li><a href="#" id="print2">Print</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#" id="png2">Download PNG</a></li>
                <li><a href="#" id="jpeg2">Download JPEG</a></li>
                <li><a href="#" id="pdf2">Download PDF</a></li>
                <li><a href="#" id="svg2">Download SVG</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#" id="csv2">Download CSV</a></li>
                <li><a href="#" id="xls2">Download XLS</a></li>
              </ul>
            </div>
          </h3>
        </div>
        <div class="panel-body">
          <div id="container2"></div>
        </div>
      </div>
    </div>
  </div>
</div>

JS

$(document).ready(function() {
  var chart1Info = {
    containerId: 'container',
    definition: {
      title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
      },
      subtitle: {
        text: 'Source: thesolarfoundation.com'
      },
      yAxis: {
        title: {
          text: 'Number of Employees'
        }
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
      },
      plotOptions: {
        series: {
          label: {
            connectorAllowed: false
          },
          pointStart: 2010
        }
      },
      series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
      }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
      }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
      }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
      }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
      }]
    }
  };
  var chart2Info = {
    containerId: 'container2',
    definition: {
      title: {
        text: 'Chart2 Title'
      },
      subtitle: {
        text: 'Source: thesolarfoundation.com'
      },
      yAxis: {
        title: {
          text: 'Number of Employees'
        }
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
      },
      plotOptions: {
        series: {
          label: {
            connectorAllowed: false
          },
          pointStart: 2010
        }
      },
      series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
      }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
      }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
      }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
      }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
      }]
    }
  };

  function drawChart(chartInfo) {
    // Properties that vary by chart should be defined in chartInfo
    // Any properties that are the same for all charts are added here 
    chartInfo.responsive = {
      rules: [{
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom'
          }
        }
      }]
    };
    Highcharts.chart(chartInfo.containerId, chartInfo.definition);
  }
  //Toggle fullscreen
  $(".fullscreen-btn").click(function(e) {
    e.preventDefault();

    var $this = $(this);
    $this.children('i')
      .toggleClass('glyphicon-resize-full')
      .toggleClass('glyphicon-resize-small');
    $(this).closest('.panel').toggleClass('panel-fullscreen');
    var chartInfo = $this.attr("id") === 'panel-fullscreen' ? chart1Info : chart2Info;
    console.log($this.id, chartInfo);
    drawChart(chartInfo);
  });
  drawChart(chart1Info);
  drawChart(chart2Info);
});





// Export buttons
$('#png').click(function() {
  chart1Info.exportChart();
});

$('#jpeg').click(function() {
  chart1Info.exportChart({
    type: 'jpeg',
    filename: 'my-pdf'
  });
});

$('#pdf').click(function() {
  chart.exportChart({
    type: 'pdf',
    filename: 'my-pdf'
  });
});

$('#svg').click(function() {
  chart1Info.exportChart({
    type: 'SVG',
    filename: 'my-svg'
  });
});

document.getElementById('csv').onclick = () => {
  chart1Info.downloadCSV()
};

document.getElementById('xls').onclick = () => {
  chart1Info.downloadXLS()
}

$('#print').click(function() {
  chart1Info.print();
});


$('#png2').click(function() {
  chart2Info.exportChart();
});

$('#jpeg2').click(function() {
  chart2Info.exportChart({
    type: 'jpeg',
    filename: 'my-pdf'
  });
});

$('#pdf2').click(function() {
  chart2Info.exportChart({
    type: 'pdf',
    filename: 'my-pdf'
  });
});

$('#svg2').click(function() {
  chart2Info.exportChart({
    type: 'SVG',
    filename: 'my-svg'
  });
});

document.getElementById('csv2').onclick = () => {
  chart2.downloadCSV()
};

document.getElementById('xls2').onclick = () => {
  chart2Info.downloadXLS()
}

$('#print2').click(function() {
  chart2Info.print();
});

CSS

.panel-actions {
  margin-top: -20px;
  margin-bottom: 0;
  text-align: right;
}

.panel-actions a {
  color: #333;
}

.panel-fullscreen {
  display: block;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}

希望有人能帮我解决这个问题。预先感谢您!!

Answer 1

您的代码中有两个错误。首先是变量的范围 - 其中一部分位于主函数之外。第二个是，当您调用例如 downloadCSV() 时，您必须引用创建的图表而不是图表选项。

$(document).ready(function() {
  var charts = [];
  var chart1Info = {
    containerId: 'container',
    definition: {
      title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
      },
      subtitle: {
        text: 'Source: thesolarfoundation.com'
      },
      yAxis: {
        title: {
          text: 'Number of Employees'
        }
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
      },
      plotOptions: {
        series: {
          label: {
            connectorAllowed: false
          },
          pointStart: 2010
        }
      },
      series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
      }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
      }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
      }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
      }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
      }]
    }
  };
  var chart2Info = {
    containerId: 'container2',
    definition: {
      title: {
        text: 'Chart2 Title'
      },
      subtitle: {
        text: 'Source: thesolarfoundation.com'
      },
      yAxis: {
        title: {
          text: 'Number of Employees'
        }
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
      },
      plotOptions: {
        series: {
          label: {
            connectorAllowed: false
          },
          pointStart: 2010
        }
      },
      series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
      }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
      }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
      }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
      }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
      }]
    }
  };

  function drawChart(chartInfo) {
    // Properties that vary by chart should be defined in chartInfo
    // Any properties that are the same for all charts are added here 
    chartInfo.responsive = {
      rules: [{
        condition: {
          maxWidth: 500
        },
        chartOptions: {
          legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom'
          }
        }
      }]
    };

    if (chartInfo == chart1Info) {
      charts[0] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
    } else {
      charts[1] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
    }

  }
  //Toggle fullscreen
  $(".fullscreen-btn").click(function(e) {
    e.preventDefault();

    var $this = $(this);
    $this.children('i')
      .toggleClass('glyphicon-resize-full')
      .toggleClass('glyphicon-resize-small');
    $(this).closest('.panel').toggleClass('panel-fullscreen');
    var chartInfo = $this.attr("id") === 'panel-fullscreen' ? chart1Info : chart2Info;
    console.log($this.id, chartInfo);
    drawChart(chartInfo);
  });

  drawChart(chart1Info);
  drawChart(chart2Info);



  // Export buttons
  $('#png').click(function() {
    charts[0].exportChart();
  });

  $('#jpeg').click(function() {
    charts[0].exportChart({
      type: 'jpeg',
      filename: 'my-pdf'
    });
  });

  $('#pdf').click(function() {
    charts[0].exportChart({
      type: 'pdf',
      filename: 'my-pdf'
    });
  });

  $('#svg').click(function() {
    charts[0].exportChart({
      type: 'SVG',
      filename: 'my-svg'
    });
  });

  document.getElementById('csv').onclick = () => {
    charts[0].downloadCSV()
  };

  document.getElementById('xls').onclick = () => {
    charts[0].downloadXLS()
  }

  $('#print').click(function() {
    charts[0].print();
  });


  $('#png2').click(function() {
    charts[1].exportChart();
  });

  $('#jpeg2').click(function() {
    charts[1].exportChart({
      type: 'jpeg',
      filename: 'my-pdf'
    });
  });

  $('#pdf2').click(function() {
    charts[1].exportChart({
      type: 'pdf',
      filename: 'my-pdf'
    });
  });

  $('#svg2').click(function() {
    charts[1].exportChart({
      type: 'SVG',
      filename: 'my-svg'
    });
  });

  document.getElementById('csv2').onclick = () => {
    charts[1].downloadCSV()
  };

  document.getElementById('xls2').onclick = () => {
    charts[1].downloadXLS()
  }

  $('#print2').click(function() {
    charts[1].print();
  });
});

现场演示:http://jsfiddle.net/BlackLabel/ug1z8j6r/