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

Question

使用 Amcharts，我可以为我的动态生成图表 response-data。但是在将其导出为 PDF 时，它仅以白色背景下载（不过我希望它为绿色背景）。我已经使用 CSS 为图表 div 设置了背景，这在 UI 中效果很好。但是下载的时候背景变白了

我还需要将标题添加到导出为 PDF 的图表（例如：'Monthly ABC Status' 从 01/08/2018 到 31/08/2018）。

这是我的代码： 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 has more information on how to customze the layout to include more than just one chart. The plugin uses pdfMake for its PDF export functionality, so the pdfMake documentation 是布局信息的另一个有用资源。

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

amcharts configure the generated chart with a title and background color to be exported as PDF

javascript

charts

amcharts