高图png导出饼图

时间:2018-09-24 12:10:07

标签: highcharts export png fill

我正在尝试导出包含径向填充的饼图(通过export.highcharts.com)。我可以使图表正确显示在屏幕上,但是在导出时,图表不保留径向填充,导出的图表包含纯色。 Highcharts导出服务器是否具有此功能,或者我是否缺少明显的功能?

var exportUrl = 'http://export.highcharts.com/';
var colors = Highcharts.getOptions().colors;
$.each(colors, function(i, color) {
  colors[i] = {
    radialGradient: {
      cx: 0.5,
      cy: 0.3,
      r: 0.7
    },
    stops: [
      [0, color],
      [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
    ]
  };

});

var optionsStr = JSON.stringify({
    chart: {
      type: 'pie'
    },
    title: {
      style: {
        fontFamily: 'Varela Round',
        fontSize: '24px'
      },
      text: 'Dashboard Logon Activity by User'
    },
    credits: {
      enabled: false
    },
    tooltip: {
      enabled: false
    },

    yAxis: {
      allowDecimals: false,
      title: {
        text: 'Units'
      }
    },
    plotOptions: {
      pie: {
        //center: [960, 450],
        size: 200,
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>: {point.percentage:.1f} %',
          style: {
            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
            fontFamily: 'Varela Round',
            fontSize: '10px'
          },
          connectorColor: 'silver'
        }
      }
    },
    series: [{
      name: 'logons',
      data: [{
        "name": "User 1",
        "y": 19
      }, {
        "name": "User 2",
        "y": 16
      }, {
        "name": "User 3",
        "y": 22
      }, {
        "name": "User 4",
        "y": 8
      }, {
        "name": "User 5",
        "y": 31
      }, {
        "name": "User 6",
        "y": 17
      }],
      color: colors
    }]
  }),
  globalOptions = JSON.stringify({
    lang: {
      thousandsSep: ','
    }
  }),
  dataString = encodeURI('async=true&type=jpeg&width=1200&options=' + optionsStr + '&globalOptions=' + globalOptions);

$.ajax({
  type: 'POST',
  data: dataString,
  url: exportUrl,
  success: function(data) {
    //console.log('get the file from http://export.highcharts.com/: ', data);
    //$('#container').html('<img src="' + exportUrl + data + '"/>');
    var imageurl = exportUrl + data;
    console.log(imageurl);
  },
  error: function(err) {
    debugger;
    console.log('error', err.statusText)
  }

});

应用程序的辐射输出

Radialised output from application

导出的图像具有扁平填充:

Exported image with flat fill

0 个答案:

没有答案