amcharts настраивает сгенерированную диаграмму с заголовком и цветом фона для экспорта в формате PDF - PullRequest
Новая
       7

amcharts настраивает сгенерированную диаграмму с заголовком и цветом фона для экспорта в формате PDF

0 голосов
/ 12 сентября 2018

Используя Amcharts, я могу создать диаграмму для моих динамических данных ответа. но при экспорте в PDF он загружается только с белым фоном (хотя я хочу и с зеленым фоном). Я установил фон для диаграммы с помощью CSS, который хорошо работает в пользовательском интерфейсе. Но при загрузке фон становится белым.

Кроме того, мне нужно добавить заголовок к диаграмме, экспортированной в формате PDF (например: «Ежемесячный статус ABC» с 01.08.2008 г. по 31.08.2008 г.).

Вот мой код: 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
  }
} );

Любые предложения будут высоко оценены!

1 Ответ

0 голосов
/ 12 сентября 2018

Вы должны установить 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>

В git-файле readme содержится большая часть информации, относящейся к плагину, а в этом расширенном учебном пособии содержится больше информации о том, как настроить макет, включив в него более одной диаграммы. Плагин использует pdfMake для своей функции экспорта в PDF, поэтому документация pdfMake является еще одним полезным ресурсом для информации о макете.

...