jjzjj

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

coder 2025-03-30 原文

我正在使用自定义可视化组件和 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。

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

  1. 使用主题设置图表主色
  2. 设置 plotOptions.fillColor: null
  3. 设置 plotOptions.fillColor: '#927453'
  4. 将 plotOptions 从“area”设置为“series”
  5. 设置 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/

plotOptionsjavascript39sectionhighchartsjasper-reports

有关javascript - Jasper 报告 Highcharts 的 plotOptions.fillColor 颜色问题的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  4. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  5. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  6. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  7. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  8. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  9. ruby 诅咒颜色 - 2

    如何使用Ruby的默认Curses库获取颜色？所以像这样:puts"\e[0m\e[30;47mtest\e[0m"效果很好。在浅灰色背景上呈现漂亮的黑色。但是这个:#!/usr/bin/envrubyrequire'curses'Curses.noecho#donotshowtypedkeysCurses.init_screenCurses.stdscr.keypad(true)#enablearrowkeys(forpageup/down)Curses.stdscr.nodelay=1Curses.clearCurses.setpos(0,0)Curses.addstr"Hello

  10. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基

随机推荐