javascript - amcharts 使用标题和背景颜色配置生成的图表以导出为 PDF

Question

使用 Amcharts，我能够为我的动态响应数据生成图表。但是在将其导出为 PDF 时，它仅以白色背景下载(不过我希望它为绿色背景)。我已经使用 CSS 为图表 div 设置了背景，这在 UI 中运行良好。但是在下载时，背景变白了。

此外，我还需要将标题添加到导出为 PDF 的图表(例如:从 2018 年 1 月 8 日到 2018 年 8 月 31 日的“每月 ABC 状态”)。

这是我的代码: JSFiddle

   var chartData = [ {
  "country": "USA",
  "visits": 4025,
  "color": "#FF0F00"
}, {
  "country": "China",
  "visits": 1882,
  "color": "#FF6600"
}, {
  "country": "Japan",
  "visits": 1809,
  "color": "#FF9E01"
}, {
  "country": "Germany",
  "visits": 1322,
  "color": "#FCD202"
}, {
  "country": "UK",
  "visits": 1122,
  "color": "#F8FF01"
}, {
  "country": "France",
  "visits": 1114,
  "color": "#B0DE09"
}, {
  "country": "India",
  "visits": 984,
  "color": "#04D215"
}, {
  "country": "Spain",
  "visits": 711,
  "color": "#0D8ECF"
}, {
  "country": "Netherlands",
  "visits": 665,
  "color": "#0D52D1"
}, {
  "country": "Russia",
  "visits": 580,
  "color": "#2A0CD0"
}, {
  "country": "South Korea",
  "visits": 443,
  "color": "#8A0CCF"
}, {
  "country": "Canada",
  "visits": 441,
  "color": "#CD0D74"
}, {
  "country": "Brazil",
  "visits": 395,
  "color": "#754DEB"
}, {
  "country": "Italy",
  "visits": 386,
  "color": "#DDDDDD"
}, {
  "country": "Australia",
  "visits": 384,
  "color": "#999999"
}, {
  "country": "Taiwan",
  "visits": 338,
  "color": "#333333"
}, {
  "country": "Poland",
  "visits": 328,
  "color": "#000000"
} ];


var chart = AmCharts.makeChart( "chartdiv", {
  "theme": "light",
  "type": "serial",
  "backgroundColor":"green",
  "dataProvider": chartData,
  "categoryField": "country",
  "depth3D": 20,
  "angle": 30,

  "categoryAxis": {
    "labelRotation": 90,
    "gridPosition": "start"
  },

  "valueAxes": [ {
    "title": "Visitors"
  } ],

  "graphs": [ {
    "valueField": "visits",
    "colorField": "color",
    "type": "column",
    "lineAlpha": 0.1,
    "fillAlphas": 1
  } ],

  "chartCursor": {
    "cursorAlpha": 0,
    "zoomable": false,
    "categoryBalloonEnabled": false
  },

  "export": {
    "enabled": true
  }
} );

如有任何建议，我们将不胜感激!

Answer 1

您必须设置 backgroundColor在导出配置中使其工作:

export: {
  // ...
  backgroundColor: "#008855", //replace with your color
  // ...
}

至于标题，您可以通过创建包含新内容的 pdfMake 属性来设置它:

"pdfMake": {
    "content": [ "'Monthly ABC Status' from 01/08/2018 To 31/08/2018" , {
        "image": "reference", //exported image
        "fit": [ 523.28, 769.89 ] // fit image to A4
    } ]
}

下面的演示:

var chartData = [{
  "country": "USA",
  "visits": 4025,
  "color": "#FF0F00"
}, {
  "country": "China",
  "visits": 1882,
  "color": "#FF6600"
}, {
  "country": "Japan",
  "visits": 1809,
  "color": "#FF9E01"
}, {
  "country": "Germany",
  "visits": 1322,
  "color": "#FCD202"
}, {
  "country": "UK",
  "visits": 1122,
  "color": "#F8FF01"
}, {
  "country": "France",
  "visits": 1114,
  "color": "#B0DE09"
}, {
  "country": "India",
  "visits": 984,
  "color": "#04D215"
}, {
  "country": "Spain",
  "visits": 711,
  "color": "#0D8ECF"
}, {
  "country": "Netherlands",
  "visits": 665,
  "color": "#0D52D1"
}, {
  "country": "Russia",
  "visits": 580,
  "color": "#2A0CD0"
}, {
  "country": "South Korea",
  "visits": 443,
  "color": "#8A0CCF"
}, {
  "country": "Canada",
  "visits": 441,
  "color": "#CD0D74"
}, {
  "country": "Brazil",
  "visits": 395,
  "color": "#754DEB"
}, {
  "country": "Italy",
  "visits": 386,
  "color": "#DDDDDD"
}, {
  "country": "Australia",
  "visits": 384,
  "color": "#999999"
}, {
  "country": "Taiwan",
  "visits": 338,
  "color": "#333333"
}, {
  "country": "Poland",
  "visits": 328,
  "color": "#000000"
}];


var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "serial",
  "backgroundColor": "green",
  "dataProvider": chartData,
  "categoryField": "country",
  "depth3D": 20,
  "angle": 30,

  "categoryAxis": {
    "labelRotation": 90,
    "gridPosition": "start"
  },

  "valueAxes": [{
    "title": "Visitors"
  }],

  "graphs": [{
    "valueField": "visits",
    "colorField": "color",
    "type": "column",
    "lineAlpha": 0.1,
    "fillAlphas": 1
  }],

  "chartCursor": {
    "cursorAlpha": 0,
    "zoomable": false,
    "categoryBalloonEnabled": false
  },

  "export": {
    "enabled": true,
    "backgroundColor": "#008855",
    "pdfMake": {
      "content": ["'Monthly ABC Status' from 01/08/2018 To 31/08/2018", {
        "image": "reference", //exported image
        "fit": [523.28, 769.89] // fit image to A4
      }]
    }
  }
});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#chartdiv {
  width: 100%;
  height: 100%;
  background-color: #008855;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

github 自述文件包含与插件和此 advanced tutorial 有关的大部分信息有更多关于如何自定义布局以包含多个图表的信息。该插件使用 pdfMake 实现其 PDF 导出功能，因此 pdfMake documentation是布局信息的另一个有用资源。