Question

我正在研究highcharts resize功能。为此我使用自定义两个按钮，图像一个是展开，第二个是折叠。

exporting: {
      buttons: {
          customButton: {
              symbol: 'url(http://localhost/abc/expand.png)',
              symbolX: 20,
              symbolY: 20,
              onclick: function() {
                  $("#container2").hide();
                  $("#container3").hide();
                  $("#container4").hide();
                  chart.setSize(1250, 500);
              }
          },
          anotherButton: {
              symbol: 'url(http://localhost/widget/collapse.png)',
              symbolX: 20,
              symbolY: 20,
              onclick: function() {
                  $("#container2").show();
                  $("#container3").show();
                  $("#container4").show();
                  chart.setSize(607, 300);
              }
          }
      }
  }
  onclick = "function();" > Fill < /a>

我正在寻找使用单个按钮而不是使用两个单独的按钮，并在展开按钮后使用折叠按钮替换。在展开按钮上单击我更换展开按钮以折叠按钮但单击折叠按钮我必须调用折叠功能，这不起作用。

Answer 1

你可以尝试这样的事情。

exporting: {
    buttons: {
      customButton: {
        symbol: 'url(http://localhost/abc/expand.png)',
        text:'customButton',
        symbolX: 20,
        symbolY: 20,
        onclick: function(e) {
          if($(e.currentTarget).find('image').attr('href') == 'http://localhost/abc/expand.png'){
            $("#container2").hide();
            $("#container3").hide();
            $("#container4").hide();
            chart.setSize(1250, 500);
            $(e.currentTarget).find('image').attr('href','http://localhost/widget/collapse.png')
          }
          else{
            $("#container2").show();
            $("#container3").show();
            $("#container4").show();
            chart.setSize(607, 300);
            $(e.currentTarget).find('image').attr('href','http://localhost/abc/expand.png')
          }
        }
      }
    }
  }

Highcharts使用自定义导出按钮调整图表大小，并动态替换展开和折叠按钮

1 个答案: