Problem z kolorem raportu Jasptera z działką HighchartsOptions.fillColor

Question

Zajmuję się tworzeniem raportu w Jaspersoft Studio 6.4 za pomocą niestandardowego składnika wizualizacji i Highcharts.

Krótko mówiąc, podczas tworzenia wykresu bąbelkowego lub wykresu warstwowego, właściwość plotOptions.fillColor nie działa poprawnie, ale pozostawia czarne bąbelki wewnątrz lub ułożone w stosie. Kolor czarny zwykle oznacza, że ​​kolor nie został znaleziony, ale linia bąbelków/linii na wykresie obszaru działa tak, jak powinna.

Oto następujące Highcharts skrypt na wykresie obszar:

define(['jquery_hc','hchart'], function ($, Highcharts) { 
 

 
\t return function (instanceData) { \t 
 

 
\t // Creating the chart 
 
\t var config = { 
 

 
    chart: { 
 
    \t type: 'area', 
 
    \t plotBorderWidth: 1, 
 
     renderTo: instanceData.id, 
 
     width: instanceData.width, 
 
\t \t height: instanceData.height, 
 
\t \t marginBottom: 15, 
 
\t \t marginLeft: 40, 
 
\t \t marginRight: 5, 
 
\t \t marginTop: 5 
 
    }, 
 
    title: { 
 
    \t text: "" 
 
    }, 
 
    colors: ['#927453', '#9b672c', '#b0771e', '#e66726', '#474747', '#949494', '#feb40b', '#bd9c31', '#e0b33a'], 
 
    xAxis: { 
 
     allowDecimals: false, 
 
     title: {enabled: false}, 
 
     labels: {enabled: false}, 
 
     visible: false 
 
    }, 
 
\t legend: { 
 
\t \t itemStyle: {"fontSize": 6}, 
 
\t \t symbolPadding: 4, 
 
\t \t symbolHeight: 4, 
 
     symbolWidth: 4, 
 
     y: 20 
 
\t }, 
 
     credits: {enabled: false}, 
 
\t yAxis: { 
 
\t \t title: {enabled: false}, 
 
     labels: { 
 
     \t style: {"fontSize": 6}, 
 
     \t formatter: function() { 
 
      \t return this.value; 
 
      \t }, 
 
     }, 
 
     tickInterval: 2 
 
    }, 
 
    plotOptions: { 
 
     area: { 
 
      stacking: 'percent', 
 
     \t animation: false, 
 
     \t marker: { 
 
     \t \t enabled: false 
 
     \t }, 
 
     \t lineWidth: 1 
 
     } 
 
    }, 
 
    series: [{ 
 
     name: 'that', 
 
     data: [502, 635, 809, 947, 1402, 3634, 5268] 
 
    }, { 
 
     name: 'it', 
 
     data: [106, 107, 111, 133, 221, 767, 1766] 
 
    }, { 
 
     name: 'with', 
 
     data: [163, 203, 276, 408, 547, 729, 628] 
 
    }, { 
 
     name: 'who', 
 
     data: [18, 31, 54, 156, 339, 818, 1201] 
 
    }, { 
 
     name: 'how', 
 
     data: [2, 2, 2, 6, 13, 30, 46] 
 
    }, { 
 
     name: 'this', 
 
     data: [82, 72, 62, 46, 113, 320, 443] 
 
    }, { 
 
     name: 'that', 
 
     data: [11, 12, 14, 16, 13, 55, 113] 
 
    }, { 
 
     name: 'those', 
 
     data: [7, 1, 3, 11, 15, 37, 49] 
 
    }, { 
 
     name: 'these', 
 
     data: [108, 301, 504, 1056, 3039, 8018, 10201] 
 
    }, { 
 
     name: 'this too', 
 
     data: [10, 30, 50, 105, 303, 801, 1020] 
 
    }] 
 
} 
 

 
new Highcharts.Chart(config); 
 
\t 
 
\t } 
 
});

A build.js:

({ 
 
    baseUrl: '', 
 
    paths: { 
 
     jquery_hc: "../jquery-3.2.1", 
 
     hchart: "../highcharts", 
 
     'areaChart': 'areaChart' 
 
    }, 
 
    shim: { 
 
    \t 'hchart' : { 
 
    \t \t deps: ["jquery_hc"], 
 
    \t \t exports: 'Highcharts' 
 
    \t } 
 
    }, 
 
    name: 'areaChart', 
 
    out: "areaChart.min.js" 
 
})

Th e highchart używa najnowszych highchart.js i jquery-3.2.1.js.

Niewiele rzeczy Próbowałem dodać kolor:

1. Korzystanie motyw umieścić wykresy główny kolor
2. Ustawianie plotOptions.fillColor: null
3. Ustawianie plotOptions.fillColor: '# 927453'
4. Ustawianie plotOptions do "serii" z "powierzchni"
5. Ustawienie plotOptions.color: [te same kolory]

i może kilka innych rzeczy na podstawie odwołania API z Highcharts.

Z jednej strony działa, jeśli umieściłem plotOptions.fillColor: "#ffffff", kolor wszystkich zmian, co oznacza, że ​​problem polega głównie na dopasowywaniu jednego koloru na zbiór danych.

Jednym wielkim problemem jest to, że ten nie jest odtwarzalny w JSFiddle (JSFiddle).

Tak więc, raport Jaspera może być przyczyną winy, ale zaczynam brakować pomysłów. Znalazłem jeden problem, który może być związany z tym: (https: //
community.jaspersoft.com/jaspersoft-studio/issues/8641), ale nie byłem w stanie wiele z tym zrobić. Ustawiać. Moja aplikacja internetowa używa silnika jaspisowego do generowania raportów, a problem jest tam również obecny.

Ludzie StackOverflow, pracownicy Highcharts i pracownicy Jaspersoft, łączą swoją wiedzę i pomagają rozwiązać ten problem!

Wreszcie, obraz Jasper Zgłoś pracowni wygenerowanego raportu:

Answer 1

Po patrząc na kod, znalazłem raport działa prawidłowo, gdy widzimy go w formacie HTML, ale w formacie PDF nie działa prawidłowo. Ponieważ my Cow CVC komponent wykorzystuje phantmy do pobrania raportu, próbowałem przeszukać problem związany z phantomjs i highchartami, ale nie mogłem nic znaleźć.

Następnie próbowałem wyglądać właściwość plotOption i dodałem następujący kod do pola.

plotOptions: { 
    series: { 
     animation: false, 
     stacking: 'percent', 
     lineWidth: 1, 
     fillColor: null, 
     fillOpacity: 1, // this is default to 0.75 
     marker: { 
      enabled: false 
     } 
    } 
}, 

Następnie rozpoczyna się wyświetlenie wyniku również w formacie PDF. Więc głównym winowajcą jest fillOpacity Jeśli ustawisz go na 1, twój problem zostanie rozwiązany.

Uwaga: W przypadku użycia parametru fillOpacity innego niż 1, wynik nie jest wyświetlany.

Można również określić kolor, kolor wypełnienia i krycie, jak pokazano poniżej.

series: [{ 
     name: 'that', 
     data: [502, 635, 809, 947, 1402, 3634, 5268], 
     fillColor:'red', // use this color light as compared to color 
     fillOpacity: 1, 
     color: 'white' // use this color dark as compared to fillcolor 
    }, 
    ... 
    ... 
    ... 
    ,{ 
     name: 'this too', 
     data: [10, 30, 50, 105, 303, 801, 1020], 
     fillColor:'#00ff00', 
     fillOpacity: 1, 
     color: 'orange' 
    }] 

Można pobrać kod z here.