有沒有辦法將HighCharts工具提示的內容複製到剪貼板？

Question

我希望能夠點擊一個點，並將該點的工具提示內容複製到瀏覽器剪貼板中。我在這裏有一個妥協的解決方案，將工具提示的html複製到輸入字段中，然後將其複製到剪貼板中。理想情況下，我喜歡在不需要輸入字段的情況下執行此操作，因爲這也需要將焦點移至輸入字段。

我在想，應該可以選擇工具提示本身的文本，並從那裏複製它，而不是使用輸入作爲中間。

在這種example點擊一個點拷貝工具提示

$(function() { 
    $('#container').highcharts({ 
    chart: {}, 

    tooltip: { 
     useHTML: true, 
     borderWidth: 0, 
     style: { 
     padding: 0 
     } 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    series: [{ 
     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], 
     events: { 
     click: function(event) { 
      copyToClipboard(this.chart.tooltip.label.div.innerHTML); 
     } 
     } 
    }] 
    }); 

    // modified from another stackoverflow question 
    function copyToClipboard(html) { 
    // create hidden text element, if it doesn't already exist 
    var targetId = "clipboardInput"; 
    target = document.getElementById("clipboardInput"); 
    target.value = html; 
    target.focus(); 
    target.setSelectionRange(0, target.value.length); 
    document.execCommand("cut"); 
    } 
}); 

Answer 1

document.execCommand('texttocopy');作品在大多數現代瀏覽器的HTML。嘗試使用高圖表工具提示執行它。

否則，你可以隨時使用GitHub的Zelo Clipboard（瀏覽器需要支持Flash此選項）

Answer 2

有多種方式。但是這一次，我發現作爲用戶實際上已經做了最安全：

$(function() { 
    function copyToClipboard(text) { 
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text); 
    } 

    $('#container').highcharts({ 
    chart: {}, 

    tooltip: { 
     useHTML: true, 
     borderWidth: 0, 
     style: { 
     padding: 0 
     } 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    series: [{ 
     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], 
     events: { 
     click: function(event) { 
      console.log(this.chart.tooltip.label.div.textContent); 
      var theText = this.chart.tooltip.label.div.textContent; 
      copyToClipboard(theText); 
     } 
     } 
    }] 
    }); 
}); 

彈出框中出現的文字是用提示去做就可以被複制。

Answer 3

我有一個工作解決方案，雖然仍然使用中間html元素，但它不再引起焦點問題的移動，我在我發佈的示例中看到了移動。從How do I copy to the clipboard in JavaScript?

$(function() { 
    $('#container').highcharts({ 
    chart: {}, 

    tooltip: { 
     useHTML: true, 
     borderWidth: 0, 
     style: { 
     padding: 0 
     } 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    series: [{ 
     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], 
     events: { 
     click: function(event) { 
      copyTextToClipboard(this.chart.tooltip.label.div.innerHTML); 
     } 
     } 
    }] 
    }); 

    function copyTextToClipboard(text) { 
    var textArea = document.createElement("textarea"); 

    // 
    // *** This styling is an extra step which is likely not required. *** 
    // 
    // Why is it here? To ensure: 
    // 1. the element is able to have focus and selection. 
    // 2. if element was to flash render it has minimal visual impact. 
    // 3. less flakyness with selection and copying which **might** occur if 
    // the textarea element is not visible. 
    // 
    // The likelihood is the element won't even render, not even a flash, 
    // so some of these are just precautions. However in IE the element 
    // is visible whilst the popup box asking the user for permission for 
    // the web page to copy to the clipboard. 
    // 

    // Place in top-left corner of screen regardless of scroll position. 
    textArea.style.position = 'fixed'; 
    textArea.style.top = 0; 
    textArea.style.left = 0; 

    // Ensure it has a small width and height. Setting to 1px/1em 
    // doesn't work as this gives a negative w/h on some browsers. 
    textArea.style.width = '2em'; 
    textArea.style.height = '2em'; 

    // We don't need padding, reducing the size if it does flash render. 
    textArea.style.padding = 0; 

    // Clean up any borders. 
    textArea.style.border = 'none'; 
    textArea.style.outline = 'none'; 
    textArea.style.boxShadow = 'none'; 

    // Avoid flash of white box if rendered for any reason. 
    textArea.style.background = 'transparent'; 


    textArea.value = text; 

    document.body.appendChild(textArea); 

    textArea.select(); 

    try { 
     var successful = document.execCommand('copy'); 
     var msg = successful ? 'successful' : 'unsuccessful'; 
     console.log('Copying text command was ' + msg); 
    } catch (err) { 
     console.log('Oops, unable to copy'); 
    } 

    document.body.removeChild(textArea); 
    } 

});