查看svg代码

时间:2017-01-09 10:57:51

标签: javascript css svg highcharts tooltip

我已经搜了好几天了,但却找不到解决这个问题的方法。我正在生成没有问题的高级图表。另外,我使用下面的简单函数来获取每个图表的svg代码。

 function generateSVG (){

     var svg_xml =  $('#container').highcharts().getSVG();

     document.getElementById('svg_code').innerHTML = svg_xml;
 }

我的问题是,使用最初由highcharts生成的图表,我可以将鼠标悬停在图表上并查看工具提示。但是,当我稍后嵌入生成的svg代码时,即使包含所有外部资源,工具提示也不起作用 - 一切都变得像静态图像。在检查用于生成初始图表的代码旁边提取的svg代码之后,我注意到在提取的代码中缺少包含highcharts的工具提示类的代码行。我在这里错过了一些东西。下面是用于生成图表的函数之一的示例。

function highArea(theD){

    setHighSize();

    var theData = theD;

    $.get(theData, function(data) {

        Highcharts.chart('chartDisplay', {
            colors: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff"],
            chart: {
                type: "area",
                useHTML: true
            },
            exporting: {
                buttons: {
                    contextButton: {
                        enabled: false
                    }
                }
            },
            title: {
                text: chart_title
            },
            data: {
                csv: data
            },
            title: {
                text: chart_title
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                allowDecimals: false,
                labels: {
                    formatter: function () {
                        return this.value; 
                    }
                }
            },
            yAxis: {
                title: {
                    text: some_label
                },
            },
            tooltip: {
                pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/> {point.x}'
            },
            plotOptions: {
                area: {
                    marker: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            }
        });

        generateSVG();

    });

}

我正在尝试做甚么可能吗?我真的很感激有关此问题的任何反馈。 谢谢:))

0 个答案:

没有答案