Question

我在我的HighChart中渲染了4个columnRange并面临小间隔（例如A的一分钟间隔为12：51-12：52和12：56-12：57）的问题将结果打印为png图像时不会渲染。 HighCharts中是否有任何配置可以解决这个问题？

Highcharts.chart('container',
{
    chart: {
        type: 'columnrange',
        inverted: true,
        height: 192,
        spacingLeft: 10
    },
    credits: {
        enabled: false
    },
    title: {
        text: null,
        style: {
            "fontSize": "8px"
        }
    },
    subTitle: {
        text: null
    },
    legend: {
        enabled: false,
    },
    plotOptions: {
        series: {
            pointWidth: 30
        }
    },
    xAxis: {
        min: 1,
        max: 4,
        categories: ['', 'A', 'B', 'C', 'D'],
        title: {
            text: null
        },
        labels: {
            rotation: -45,
            style: {
                "fontSize": "7px"
            }
        },
        gridLineWidth: 0
    },
    yAxis: {
        type: 'datetime',
        title: {
            text: null
        },
        labels: {
            rotation: -45,
            style: {
                "fontSize": "6px"
            }
        },
        tickInterval: 1800000,
        gridLineWidth: 1
    },
    series: [{
        data: [{
                x: 1,
                low: 1483336800000,
                high: 1483336860000,
                color: '#66ccff'
            },
            {
                x: 2,
                low: 1483336860000,
                high: 1483337340000,
                color: '#ff9966'
            },
            {
                x: 1,
                low: 1483337340000,
                high: 1483337400000,
                color: '#66ccff'
            },
            {
                x: 2,
                low: 1483337400000,
                high: 1483337700000,
                color: '#ff9966'
            },
            {
                x: 1,
                low: 1483337700000,
                high: 1483339920000,
                color: '#66ccff'
            },
            {
                x: 3,
                low: 1483339920000,
                high: 1483341780000,
                color: '#79d279'
            },
            {
                x: 2,
                low: 1483341780000,
                high: 1483342260000,
                color: '#ff9966'
            },
            {
                x: 3,
                low: 1483342260000,
                high: 1483345080000,
                color: '#79d279'
            },
            {
                x: 1,
                low: 1483345080000,
                high: 1483345140000,
                color: '#66ccff'
            },
            {
                x: 3,
                low: 1483345140000,
                high: 1483346400000,
                color: '#79d279'
            },
            {
                x: 1,
                low: 1483346400000,
                high: 1483346460000,
                color: '#66ccff'
            },
            {
                x: 3,
                low: 1483346460000,
                high: 1483347420000,
                color: '#79d279'
            },
            {
                x: 1,
                low: 1483347420000,
                high: 1483347600000,
                color: '#66ccff'
            },
            {
                x: 2,
                low: 1483347600000,
                high: 1483347780000,
                color: '#ff9966'
            },
            {
                x: 1,
                low: 1483347780000,
                high: 1483348020000,
                color: '#66ccff'
            },
            {
                x: 3,
                low: 1483348020000,
                high: 1483348200000,
                color: '#79d279'
            },
            {
                x: 1,
                low: 1483348200000,
                high: 1483352460000,
                color: '#66ccff'
            },
            {
                x: 3,
                low: 1483352460000,
                high: 1483352640000,
                color: '#79d279'
            },
            {
                x: 1,
                low: 1483352640000,
                high: 1483352700000,
                color: '#66ccff'
            },
            {
                x: 3,
                low: 1483352700000,
                high: 1483353840000,
                color: '#79d279'
            },
            {
                x: 1,
                low: 1483353840000,
                high: 1483354920000,
                color: '#66ccff'
            },
            {
                x: 3,
                low: 1483354920000,
                high: 1483355160000,
                color: '#79d279'
            },
            {
                x: 1,
                low: 1483355160000,
                high: 1483359480000,
                color: '#66ccff'
            },
            {
                x: 3,
                low: 1483359480000,
                high: 1483361460000,
                color: '#79d279'
            },
            {
                x: 1,
                low: 1483361460000,
                high: 1483361520000,
                color: '#66ccff'
            },
            {
                x: 2,
                low: 1483361520000,
                high: 1483361580000,
                color: '#ff9966'
            },
            {
                x: 3,
                low: 1483361580000,
                high: 1483361760000,
                color: '#79d279'
            },
            {
                x: 1,
                low: 1483361760000,
                high: 1483361820000,
                color: '#66ccff'
            },
            {
                x: 2,
                low: 1483361820000,
                high: 1483362060000,
                color: '#ff9966'
            },
            {
                x: 1,
                low: 1483362060000,
                high: 1483364280000,
                color: '#66ccff'
            },
        ]
    }]
}
);

Answer 1

增加导出图像的宽度。

exporting: {
  chartOptions: {
    chart: {
      width: 1000
    }
  }
},

示例：https://jsfiddle.net/LLExL/7294/

将小的列范围间隔渲染为png图像

1 个答案: