python 通過phantomjs 調用highcharts 生成圖片 雷達圖，柱狀圖

1， 環境 CentOS6.4，python2.7

2， 下載編譯phantomjs，下載地址

https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.0.0-source.zip

依賴安裝文件；

sudo yum-y install gcc gcc-c++ make flex bison gperf ruby \

 openssl-devel freetype-devel fontconfig-devel libicu-devel sqlite-devel \

 libpng-devel libjpeg-devel

編譯phantomjs

解壓後進入phantomjs，執行：

#./build.sh

3, 下載highcarts相關js，下載地址：

https://github.com/highslide-software/highcharts.com/tree/master/exporting-server/phantomjs

4，中文等字符支持，從C:\Windows\Fonts找到

simfang.ttf  simsunb.ttf verdanab.ttf  verdanai.ttf  verdana.ttf  verdanaz.ttf

拷貝到/user/share/fonts/下面。然後執行：

sudo fc-cache -fv

5, 執行命令生成圖片：

phantomjs.exe highcharts-convert.js -infile content.json -outfile char.png -scale 2.5 -width 800

6, content.json的格式如下：

{

        chart: {
            polar: true,
            type: 'line'
        },

        title: {
            text: 'Budget vs spending',
            x: -80,
            style: { color: "#000000", fontSize: "18px" }
        },

        pane: {
            size: '80%'
        },

        xAxis: {
            categories: ['測試', 'Marketing', 'Development', 'Customer Support',
                    'Information Technology', 'Administration'],
            tickmarkPlacement: 'on',
            lineWidth: 0,
            gridLineColor: '#707073',
            labels: {
                style: {
                    color: '#000000'
                }
             },
            lineColor: '#707073',
            minorGridLineColor: '#707073',
            tickColor: '#707073',
        },

        yAxis: {
            gridLineColor: '#707073',
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0,
            tickInterval: 0.4,
            tickLength: 1.2
        },

        tooltip: {
            shared: true,
            pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
        },

        legend: {
            align: 'right',
            verticalAlign: 'top',
            y: 70,
            layout: 'vertical'
        },

        series: [{
            name: 'Allocated Budget',
            data: [0.60, 0.70, 0.25, 0.75, 0.10, 1.00],
            pointPlacement: 'on',
            color :'#4a7ebb'
        }, {
            name: 'Actual Spending',
            data: [0.30, 0.50, 0.40, 0.36, 0.20, 0.10],
            pointPlacement: 'on',
            color:'#be4b48'
        }]

    }