javascript-Highcharts服务器端渲染绘制神秘的半圆甜甜圈形状

我正在使用Highcharts服务器端渲染命令行选项在服务器端生成图形图像.它可以正确绘制图形.但是,它也总是在映像上绘制独立于配置文件的不相关的半圆甜甜圈形状.如果我使用相同的配置文件在jsfiddle或html页面上生成图表,则不会有问题.该问题仅出现在服务器端导出上.有谁知道如何阻止它？

这是我使用的命令行：

phantomjs  /path/to/highcharts-convert.js \
    -infile /path/to/option.js \
    -callback /path/to/callback.js \
    -outfile /path/to/chart.png -width 2400 \
    -constr Chart -scale 1

我无法上传图片.显然,我的声誉不足以上传图像.

您可以在以下链接中找到正常工作的jsfiddle：http://jsfiddle.net/9LYL5/
附言仅当我尝试使用服务器端渲染导出图像时,才会出现此问题.

您可以在此链接中找到如何设置服务器端highchart渲染并下载“ highcharts-convert.js”,“ callback.js”
http://www.highcharts.com/docs/export-module/render-charts-serverside/

这是我的highcharts options.js文件：

{
    chart: {
        zoomType: 'xy',
        width: 700,
        height: 520
    },
    credits: {
          enabled: false
    },
    colors: [
             '#2f7ed8', 
             '#910000', 
             '#8bbc21', 
             '#1aadce', 
             '#492970',
             '#f28f43', 
             '#77a1e5', 
             '#c42525', 
             '#a6c96a'
          ],
    title: {
        text: 'Title',
        style: {
            fontSize: '16px',
        }
    },
    xAxis: [{
        categories: ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30']
    }],
    yAxis: [{ 
        labels: {
            format: '{value}',
            style: {
                fontSize: '14px',
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'Y axis',
            style: {
                fontSize: '16px',
                color: Highcharts.getOptions().colors[1]
            }
        }
    }, { // Secondary yAxis
        title: {
            text: 'Sec Yaxis',
            style: {
                fontSize: '16px',
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value}',
            style: {
                fontSize: '14px',
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true
    }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'horizontal',
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    series: [{
        name: 'first',
        type: 'spline',
        yAxis: 1,
        data: [0, -119.9502311075212, -119.96203992145706, -119.98172620218355, -119.71898290168028, -119.97023935590325, -119.95230287195413]
    },
    {
        name: 'second',
        type: 'spline',
        yAxis: 1,
        data: [0, -119.24222667756482, -119.60905809195222, -119.63522965403729, -119.11011466187935, -119.63643171374981, -119.54969080301575]

    },{
        name: 'third',
        type: 'column',
        data: [10, 11, 9, 7, 5, 2, 7]
    },{
        name: 'fourth',
        type: 'column',
        data: [0, -0.7080044299563895, -0.35298182950484147, -0.34649654814626274, -0.6088682398009269, -0.33380764215343106, -0.40261206893838164]
    }]
}

解决方法:

我认为这是因为您包括git repo中的callback.js脚本.这只是在演示回调中,它会创建一个半圆形.删除callback.js或替换为您自己的执行所需回调的一个.

标签：phantomjs,export,highcharts,server-side,javascript
来源： https://codeday.me/bug/20191121/2054381.html