Gibt es eine Möglichkeit, den Inhalt einer HighCharts-Tooltip in die Zwischenablage zu kopieren?

Question

Ich möchte in der Lage sein, auf einen Punkt zu klicken und den Inhalt des Tooltips für diesen Punkt in die Zwischenablage des Browsers kopieren zu lassen. Ich habe hier eine kompromittierte Lösung, die den HTML-Code des Tooltips in ein Eingabefeld kopiert und dann in die Zwischenablage kopiert. Ich möchte dies idealerweise tun, ohne ein Eingabefeld zu benötigen, da dies auch erfordert, dass der Fokus in das Eingabefeld bewegt wird.

Ich denke, dass es möglich sein sollte, den Text des Tooltips selbst auszuwählen und von dort zu kopieren, anstatt die Eingabe als Zwischenprodukt zu verwenden.

In diesem example Klick auf einen Punkt kopiert den HTML-Code der Tooltip

$(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'); Werke in den meisten modernen Browsern. Versuchen Sie es mit dem Tooltip Ihres High-Chart auszuführen.

Ansonsten können Sie immer Github die Verwendung Zelo Clipboard

Answer 2

Es gibt mehrere Möglichkeiten (Browser-Flash für diese Option unterstützen müssen). Aber diese einer fand ich die sicherste, wenn der Benutzer tatsächlich, es zu tun hat:

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

Popup-Box kommt mit dem Text nach oben, die mit Eingabeaufforderungen kopiert werden soll, es zu tun.

Answer 3

Ich habe eine funktionierende Lösung, die zwar ein intermediäres html-Element verwendet, aber keine Bewegung von Fokusproblemen verursacht, die ich mit dem von mir geposteten Beispiel sah.

Working version

copyTextToClipboard Funktion von 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); 
    } 

});