Question

我正在使用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/ 附：只有当我尝试使用服务器端呈现导出图像时才会出现此问题。

您可以找到如何设置服务器端高图渲染和下载＆＃34; highcharts-convert.js＆＃34;，＆＃34; callback.js＆＃34;在这个链接 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 repo中包含callback.js脚本。这只是演示回调，它创建了一个半圆形状。删除callback.js或替换为您自己需要的回调。

Answer 2

好吧，我打开了你的例子，一切都正确导出了。请确保您拥有最新的highcharts / highcharts-convert.js。

我的结果。 enter image description here

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

2 个答案: