圖片在Highcharts中無法正確導出

Question

我正在嘗試將柱形圖導出為JPEG，但無法正確導出。

我認為圖像的尺寸需要更改。 此外，第一列（曼哈頓）旁邊還有一些不需要的文字。 那也似乎是一個錯誤。

這是導出的圖像：

<!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 個解決方案

解決方案1
1 已采納 2015-05-04 05:55:47

圖片在Highcharts中無法正確導出

問題描述

1 個解決方案

解決方案1 1 已采納 2015-05-04 05:55:47

解決方案1
1 已采納 2015-05-04 05:55:47