Javascript 引导中的Highcharts导航按钮和全屏按钮

highcharts导航按钮的功能（打印、导出到Excel等）链接到示例中的引导下拉菜单

例如，链接了带有highcharts重画功能的全屏按钮，以便图形保持正确的比率

不幸的是，我不能在一个图表中同时使用这两种方法。参见示例

HTML

CSS

---

希望有人能帮我解决这个问题。提前谢谢你

您的代码中有两个错误。首先是变量的范围——其中一部分在主函数之外。第二个问题是，当您调用例如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();
  });
});

---

现场演示：

Hi Kees de Jager，请详细说明您的要求。是否希望两个按钮相邻？您好，面板顶部的两个按钮都必须可见。这也适用于全屏模式。第三个例子就是这样。在第一个示例中，您可以看到highcharts导航按钮的功能（打印、导出到excel等）在bootstrap中工作。在第二个示例中，您可以看到工作全屏按钮。在第三个示例中，我为全屏和导航按钮添加了一个按钮。不幸的是，现在只有全屏按钮起作用，而导航按钮不起作用。我想知道如何让导航按钮重新工作Hanks ppotaczek这正是我想要的！！！有时候答案很简单。谢谢你的解释！我正在尝试将您的示例（带面板）转换为带卡的引导4。但不幸的是，全屏显示不起作用。我为Fontsome调整了Glyphion图标。我还更改了javascript部分。你知道问题出在哪里吗？再次感谢您抽出时间。示例：Hi Kees de Jager，panel fullscreen类中的固定位置被card类中的相对位置覆盖：再次感谢！！真的很感谢。我再次遇到一个问题，我不知道如何在两张以上的卡片上使用全屏重画。我不知道如何在这篇文章中添加第三个变量：“var chartInfo=$this.attr（“id”）===‘panel fullscreen’？Chart1Info:chart2Info；”。我举了一个例子，说明这部分还不完整。希望你能再次帮助我！

$(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();
});

.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;
}

$(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();
  });
});