javascript - Highcharts 服务器端渲染绘制一个神秘的半圆形 donut 形状

Question

我正在使用 Highcharts 服务器端渲染命令行选项在服务器端生成图形图像。它正确绘制图形。但是，它也总是在独立于配置文件的图像上绘制一个不相关的半圆 donut 形状。如果我使用相同的配置文件在 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]
    }]
}

Answer 1

我认为这是因为您包含了 git 存储库中的 callback.js 脚本。这只是在演示回调中，它创建了一个半圆形。删除 callback.js 或替换为您自己的一个执行您需要的回调。