Question

我正在使用JQuery 1.8和Highcharts 4.1.9在HTML文件中使用以下代码创建高级图表。

<div id="JSGraphContainer" class="GraphContainerJS" "></div>
<script>
        $(function() {
                    var line;
                    var plotList= [];
                    data = {"vals": [['1244246400000', 11],
                                      ['1244332800000', 22],
                                      ['1244419200000', 11],
                                      ['1244505600000', 22],
                                      ['1244592000000', 33],
                                      ['1244678400000', 11],
                                      ['1244764800000', 22]
                                    ]};
                    $("#JSGraphContainer").highcharts({
                        chart: {
                            type: 'line',
                            zoomType: "x",
                            plotBorderWidth: 1,
                            plotBorderColor: 'black',
                        },
                        title: {text: null},
                        xAxis: {
                            crosshair: true,
                            type: 'datetime',
                            opposite: true,
                            tickmarkPlacement: "on",
                            gridLineDashStyle: "Dash",
                            gridLineWidth: 1,
                            tickWidth : 0,
                            plotLines: plotList,
                        },
                        yAxis: {
                            title: { text: null },
                            tickAmount: 5,
                            gridLineDashStyle: "Dash",
                            opposite: false
                        },
                        series: [{  data: data.vals  }],
                        plotOptions: {
                            series: {
                                marker: {
                                    enabled: true
                                }
                            }
                        },
                        legend: {enabled : false},
                        tooltip: {
                            formatterdd: function() {
                                return ((new Date(this.x)).toDateString()) + ", " + this.y;
                            },
                            pointFormat: '<span style="color:{point.color}">\u25CF</span><b>{point.y}</b><br/>',
                            crosshairs: {
                                color: 'green',
                                dashStyle: 'solid'
                            }
                        }
                    });
                }); 
              </script>

我的测试代码是为了比较目的而提取生成的SVG

WebElement elem = driver.findElement(By.className("GraphContainerJS"));
String contents = (String)((JavascriptExecutor)driver).executeScript("return arguments[0].innerHTML;", elem);
System.out.println(contents);

当我使用FirefoxDriver然后我得到正确的SVG打印到sysout但是当我使用启用JavaScript的HTMLUnitDriver时，我获得了与Firefox不匹配的不同SVG输出，并且在复制到html文件时不呈现任何内容。我尝试使用firefox功能

new HtmlLUnitDriver(DesiredCapabilities.firefox());

但它没有帮助。我希望必须有一种方法来配置HtmlUnitDriver，如果有的话，以获得正确的输出。

欣赏任何指针。

Answer 1

在highcharts中已经有一个名为getSVG的方法可以使用。

 svg = chart.getSVG()
       .replace(/</g, '\n&lt;')  
       .replace(/>/g, '&gt;');

http://jsfiddle.net/Nishith/g10j2ymc/

从FirefoxDriver和HtmlUnitDriver获取的渲染SVG的差异

1 个答案: