Линейная диаграмма Amcharts с пузырем, не работающим должным образом с кукловодом PDF - PullRequest
Новая
       11

Линейная диаграмма Amcharts с пузырем, не работающим должным образом с кукловодом PDF

0 голосов
/ 24 апреля 2020

У меня есть приложение, которое генерирует отчет в формате PDF, содержащий линейную диаграмму с пузырьком на последнем графике для указания последнего значения (текущего дня)

Диаграмма создается с использованием следующего кода : 

var lineChart = AmCharts.makeChart("linechart", {
  "type"          : "serial",
  "categoryField" : "date",
  "dataDateFormat": "YYYY-MM-DD",
  "zoomOutText"   : "",
  "theme"         : "default",
  "marginRight"   : 40,
  "categoryAxis"  : {
    "dashLength": 1,
    "minorGridEnabled": true,
    "parseDates": true
  },
  "chartScrollbar": {
    "enabled": false
  },
  "graphs": [
    {
      "lineColor" : colorValue,
      "id"        : "AmGraph-1",
      "title"     : "graph 1",
      "valueField": "column-1",
      "balloon"   : {
              "drop"              : true,
              "adjustBorderColor" : true,
              "color"             : "#FFF",
              "pointerOrientation": "down",
              "fixedPosition"     : true,
              "fillColor":colorValue,
              "borderAlpha":0,
              "fillAlpha":1,
            },
      "bullet": "none",
      "bulletBorderAlpha": 0,
      "bulletColor": "#FFFFFF",
      "bulletColorAlpha":0,
      "showHandOnHover"            : false,
      "hideBulletsCount"           : 100,
      "lineThickness"              : 2,
      "lineAlpha"                  : 0.5,
      "lineColorField"             : "lineColor",
      "title"                      : "Data Points",
      "useLineColorForBulletBorder": true,
      "balloonText"                : "<span style='font-size:18px;'>[[value]]</span>"
    }
  ],"chartCursor": {
      "valueLineEnabled"       : false,
      "valueLineBalloonEnabled": false,
      "cursorAlpha"            : 0,
      "cursorColor"            : colorValue,
      "limitToGraph"           : "AmGraph-1",
      "valueLineAlpha"         : 0.2,
      "valueZoomable"          : true,
      "animationDuration"      : 0  
          },
  "valueAxes": [
    {
      "id"            : "ValueAxis-1",
      "maximum"       : 5,
      "minimum"       : 0,
      "axisColor"     : "#E7E7E7",
      "axisThickness" : 0,
      "firstDayOfWeek": 0,
      "tickLength"    : 25,
      "title"         : ""
    }
  ],
  "allLabels": [],
  "balloon"  : {
    "chartCursor": {
    "oneBalloonOnly": true,
  }},
  "titles"      : [],
  "dataProvider": values      
});

Пузырь отображается с использованием следующего фрагмента: 

lineChart.addListener("dataUpdated", zoomChart);
lineChart.addListener("rendered", showToday);
function showToday() {
    setTimeout(() => {
        lineChart.chartCursor.showCursorAt("2020-04-24"); //today's date to show the bubble for
        }, 2);
    }

PDF создается с помощью кукловода в NodeJS с использованием чего-то вроде: 

const browser = await puppeteer.launch({
        executablePath: config.chromiumPath,
        args: ["--no-sandbox", "--disable-dev-shm-usage"]
    });

const page = await browser.newPage();
const pdfOptions = {
        path: tempPdfPath,
        margin: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0
        },
        printBackground: true,
        preferCSSPageSize: true,
        format: "A4"
    };

response = await page.goto(URL_OF_HTML_PAGE_HERE);
respStatus = await response.status();

   if (respStatus == 200) {
        await page.pdf(pdfOptions);
        await page.waitForSelector("img");
        await browser.close();
}

После примерно 4 точек данных пузырь остается в предыдущей дате в PDF-версии. Тем не менее, в версии HTML диаграмма абсолютно нормальна (как показано на скриншотах ниже, первый - это скриншот в формате PDF, второй - актуальная версия HTML)

PDF Version HTML Version

Кроме того, я заметил, что если я увеличу значение maximum в свойстве valueAxes для конфигурации диаграммы, оно, похоже, будет работать. Тем не менее, мы должны иметь максимум 5, поскольку это максимальное значение, которое также должно быть показано на графике!

Я пытался обойти комбинацию из нескольких свойств из amcharts, но не повезло. Если у кого-то есть какие-то решения для этого

...