我正在使用自定义可视化组件和 Highcharts 在 Jaspersoft Studio 6.4 中开发一份报告。
长话短说,在绘制气泡图或面积图时,plotOptions.fillColor -attribute 无法正常工作,但会使气泡内部或堆积面积图的内部变黑。黑色通常表示未找到颜色,但面积图中的气泡线/线可以正常工作。
下面是面积图的 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: null
- 设置 plotOptions.fillColor: '#927453'
- 将 plotOptions 从“area”设置为“series”
- 设置 plotOptions.color:[相同的颜色]
也许还有其他一些基于 Highcharts 的 API 引用的东西。
另一方面,如果我输入 plotOptions.fillColor: '#ffffff',所有颜色都会发生变化,这意味着问题主要与每个数据集匹配一种颜色有关。
一个大问题是,这 在 JSFiddle 中不可重现 ( JSFiddle )。
因此,Jasper Report 可能是罪魁祸首,但我开始失去想法了。我发现了一个问题,可能与此有关:(https://
community.jaspersoft.com/jaspersoft-studio/issues/8641) ,但我无法使用此设置做很多事情。我的 Web 应用程序正在使用 jasper 引擎生成报告,问题也存在于其中。
StackOverflow 的人,Highcharts 的员工,Jaspersoft 的员工,结合你们的知识,帮我解决这个问题!
最后附一张生成报表的Jasper Report studio图片:
最佳答案
查看代码后,我发现报告以 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. 下载代码
关于javascript - Jasper 报告 Highcharts 的 plotOptions.fillColor 颜色问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46489252/