Question

使用Amcharts，我可以为我的动态响应数据生成图表。但是在将其导出为PDF时，仅以白色背景下载（尽管我希望以绿色背景下载）。我已经使用CSS设置了图表div的背景，在UI中效果很好。但是下载时，背景变成白色。

我还需要将标题添加到以PDF格式导出的图表中（例如：“每月ABC状态”从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才能使其起作用：

-1.1000    1.1000
   -1.0087    1.0091
   -0.2556   -0.5018
   -0.2446    0.0597
    0.9707   -0.5348
    0.9708    0.9425
    1.0000    0.9991
    1.0000    1.0000
    1.0000    1.0000

关于标题，设置标题的一种方法是通过创建包含新内容的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;
}

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

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

1 个答案: