Question

我正在尝试将柱形图导出为JPEG，但无法正确导出。

我认为需要更改图像的尺寸。此外，第一列（曼哈顿）旁边还有一些不需要的文字。这似乎也是一个错误。

这是导出的图片： Exported Image

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Percentage 311 calls pertaining to rats/mice in NYC within 1 block from restaurant</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

        <style type="text/css">
${demo.css}
        </style>
        <script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Percentage 311 calls pertaining to rats/mice in NYC within 1 block from restaurant'
        },
        subtitle: {
            text: 'Source: NYC Open DataSet'
        },
        xAxis: {
            type: 'category',
            labels: {
                rotation: 0,
                style: {
                    fontSize: '13px'
                }
            }
        },
        data: {
            csv: document.getElementById('csv').innerHTML
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Percentage'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: 'Percentage: <b>{point.y:.2f}%</b>'
        },
        plotOptions: {
            column: {
                grouping: false,
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    align: 'right',
                    color: '#FFFFFF',
                    format: '{point.y:.2f}', // one decimal
                    y: 10, // 10 pixels down from the top
                    style: {
                        fontSize: '13px',
                    }
                }   
            }        
        }
    });
});
        </script>
    </head>
    <body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<script src="../../js/modules/data.js"></script>
<script src="../../js/themes/dark-unica.js"></script>
<div id="container" style="min-width: 300px; max-width: 900px; height: 400px; margin: 0 auto"></div>
<pre id="csv" style="display:none">
BOROUGH
Manhattan,50.74
Queens,,25.31
Bronx,,,49.68
Brooklyn,,,,33.28
Staten Island,,,,,39.45
</pre>
    </body>
</html>

JSFiddle

Answer 1

对于主题，您可以使用以下内容：

Highcharts.theme = {
    colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", ...],

    chart: {
              backgroundColor: {...}
              ...
    },

    style: {

              fontFamily: "sans-serif",

    },

    .....
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);

对于导出功能，您可以使用 exporting.chartOptions 设置要导出的选项，例如图表的宽度和高度：

exporting: {
    chartOptions: {
        chart: {
            width: 300,
            height: 300
        }
    }
}

或者标题的字体大小。使用 plotOptions.column.dataLabels.rotation 时会显示不需要的文字。我不知道原因，我认为这可能是Highcharts中的一个错误。

这里是DEMO。

图像无法在highcharts中正确导出

1 个答案: