ssslinppp

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
【phantomjs】使用phantomjs生成highChart的图片（待完善）

阅读目录



简单介绍






一、使用phantomjs结合json文件直接生成highcharts图片

《highcharts官网-示例程序》
http://www.highcharts.com/demo/line-basic  （基本类型的chart）
将示例代码中的内容保存为json格式的数据，比如将上面的保存为basicLine.json
  1. {
  2.    title: {
  3.        text: 'Monthly Average Temperature',
  4.        x: -20 //center
  5.    },
  6.    subtitle: {
  7.        text: 'Source: WorldClimate.com',
  8.        x: -20
  9.    },
  10.    xAxis: {
  11.        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  12.            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  13.    },
  14.    yAxis: {
  15.        title: {
  16.            text: 'Temperature (°C)'
  17.        },
  18.        plotLines: [{
  19.            value: 0,
  20.            width: 1,
  21.            color: '#808080'
  22.        }]
  23.    },
  24.    tooltip: {
  25.        valueSuffix: '°C'
  26.    },
  27.    legend: {
  28.        layout: 'vertical',
  29.        align: 'right',
  30.        verticalAlign: 'middle',
  31.        borderWidth: 0
  32.    },
  33.    series: [{
  34.        name: 'Tokyo',
  35.        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  36.    }, {
  37.        name: 'New York',
  38.        data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
  39.    }, {
  40.        name: 'Berlin',
  41.        data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
  42.    }, {
  43.        name: 'London',
  44.        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  45.    }]
  46. }
《使用phantomjs生成highcharts》
























二、利用java+phantomjs生成highcharts图片

具体思路：
  1. 使用highchart-java-api的jar，配置待生成的highcharts的属性和Data；
  2. 将上一步生成的数据转换为json格式，供phantomjs使用；
  3. 使用phantomjs和json文件，生成图片；
highchart-java-api可以使用：
  1. <dependency>
  2.     <groupId>nl.pvanassen</groupId>
  3.     <artifactId>highchart-java-api</artifactId>
  4.     <version>0.1.1</version>
  5. </dependency>





















































posted on 2016-07-20 11:19  ssslinppp  阅读(1712)  评论(0)    收藏  举报