在运行PhantomJS时缺少高图表

Highcharts missing bars when running through PhantomJS

本文关键字：高图表 运行 PhantomJS      更新时间：2023-09-26

我尝试在不使用highcharts-convert.js脚本的情况下生成SVG：

var page = require('webpage').create();
var fs = require('fs');
page.open('http://webtronaut.org/graph122234.html', function() {
  var svg = page.evaluate(function() {
    return($('#highcharts-0').html());
  });
  console.log(svg);
  phantom.exit();
});

我的命令行如下所示：phantomjs runit.js > test.svg

生成的图形 SVG（测试.svg）应如下所示：http://jsfiddle.net/rj3appzz/5/

使用PhantomJS，轴看起来不错，但条形丢失了。

当我将PhantomJS的SVG代码与浏览器中的SVG代码进行比较时，有一个显着的区别：一个柱的浏览器 SVG 中 g 路径的转换参数如下所示： translate(645,330) rotate(90) scale(-1,1) scale(1 1) .PhantomJS的参数如下所示： translate(39,317) rotate(90) scale(-1,1) scale(1 0.001)

似乎有一些缩放问题？也许Highcharts错过了PhantomJS的一些大小信息？

这是因为初始化

柱线时的Highcharts动画。

实际上，我在图表配置中禁用了动画，例如：

    $('#container').highcharts({
    chart: {
        type: 'bar',
        animation: false
    },

但这似乎还不够。必须为图表类型显式禁用动画：

    plotOptions: {
        bar: {
            animation: false,
            enableMouseTracking: false
        }
    }
相关文章：