Jasper 报告 Highcharts plotOptions.fillColor 的颜色问题

Question

我正在使用自定义可视化组件和 Highcharts 在 Jaspersoft Studio 6.4 中开发一份报告。

长话短说，在制作气泡图或面积图时，plotOptions.fillColor - 属性无法正常工作，但会使气泡内部或堆积面积图的内部变黑。黑色通常表示未找到该颜色，但面积图中 bubble/lines 的线可以正常工作。

下面是面积图的 Highcharts 脚本：

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

 return function (instanceData) { 

 // Creating the chart
 var config = {

    chart: {
     type: 'area',
     plotBorderWidth: 1,
        renderTo: instanceData.id,
        width: instanceData.width,
  height: instanceData.height,
  marginBottom: 15,
  marginLeft: 40,
  marginRight: 5,
  marginTop: 5
    },
    title: {
     text: ""
    },
    colors: ['#927453', '#9b672c', '#b0771e', '#e66726', '#474747', '#949494', '#feb40b', '#bd9c31', '#e0b33a'],
    xAxis: {
        allowDecimals: false,
        title: {enabled: false},
        labels: {enabled: false},
        visible: false
    },
   legend: {
    itemStyle: {"fontSize": 6},
    symbolPadding: 4,
    symbolHeight: 4,
        symbolWidth: 4,
        y: 20
   },
      credits: {enabled: false},
 yAxis: {
  title: {enabled: false},
        labels: {
         style: {"fontSize": 6},
         formatter: function () {
             return this.value;
            },
        },
        tickInterval: 2
    },
    plotOptions: {
        area: {
            stacking: 'percent',
         animation: false,
         marker: {
          enabled: false
         },
         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);
  
 }
});

和 build.js:

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

Highchart 使用最新的 highchart.js 和 jquery-3.2.1.js.

我尝试添加颜色的一些东西：

使用主题设置图表主色
设置plotOptions.fillColor：空
设置plotOptions.fillColor：'#927453'
将 plotOptions 从 "area"
设置plotOptions.color：[相同颜色]

也许还有其他一些基于 Highcharts 的 API 参考的东西。

另一方面，如果我输入 plotOptions.fillColor: '#ffffff'，所有颜色都会发生变化，这意味着问题主要与每个数据集匹配一种颜色有关。

一个大问题是，这个 在 JSFiddle (JSFiddle) 中不可重现。

所以，Jasper Report 可能是罪魁祸首，但我开始失去想法了。我发现了一个问题，可能与此有关：(https://
community.jaspersoft.com/jaspersoft-studio/issues/8641) ，但我无法使用此设置做很多事情。我的 Web 应用程序正在使用 jasper 引擎生成报告，问题也存在于其中。

Whosebug的人，Highcharts的员工，Jaspersoft的员工，结合你们的知识，帮我解决这个问题！

最后附一张生成报表的Jasper Report studio图片：

Answer 1

查看代码后，我发现当我们以 HTML 格式查看报告时，报告可以正常工作，但 pdf 格式无法正常工作。当我们知道 CVC 组件利用 phantmjs 来下载报告时，我尝试搜索与 phantomjs 和 highcharts 相关的问题，但找不到任何东西。

然后我尝试查看 plotOption 属性并将以下 plotOption 添加到您的代码中。

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

然后它也开始以 PDF 格式显示结果。所以罪魁祸首是 fillOpacity 如果您将其设置为 1 那么您的问题将得到解决。

注意：如果您使用 1 以外的 fillOpacity，则不会显示结果。

您还可以指定颜色、填充颜色和不透明度，如下所示。

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'
    }]

您可以从 here.

下载代码

Jasper 报告 Highcharts plotOptions.fillColor 的颜色问题

Jasper report color issue with Highcharts's plotOptions.fillColor

javascript

jasper-reports

highcharts