ジャスパーはHighchartsのplotOptions.fillColorで色の問題を報告します

Question

私はでレポートを開発しています。Jaspersoft Studio 6.4カスタムビジュアライゼーションコンポーネントとハイチャートを使用しています。

バブルチャートまたはエリアチャートを実行すると、plotOptions.fillColor属性が正しく機能しませんが、内部にバブルを残したり、スタック内のチャートの内部を黒くしたりします。黒色は、通常、色が見つからないことを意味しますが、エリアチャートのバブル/ラインのラインは、必要に応じて機能します。ここで

は、面グラフのためのHighchartsスクリプトを次のようになります。

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 } 
 
});

そして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は最新のhighchart.jsとjquery-3.2.1.jsを使用しています。

1. チャートを置くために、テーマを使用して、メインカラー
2. plotOptions.fillColorの設定：ヌル
3. plotOptions.fillColorの設定： '＃927453'

   いくつかのことは私が色を追加しようとしました"エリア" からは、plotoptionsに "シリーズ" に設定

5. 設定plotOptions.color：[同じ色]

と、おそらく他にもHighchartsのAPIリファレンスに基づくものはほとんどありません。

一方、plotOptions.fillColor： '#ffffff'を置くと、すべての変更の色が問題となります。これは、主にデータセットごとに1つの色が一致することを意味します。

大きな問題の1つは、このがJSFiddle（JSFiddle）で再現できないということです。

したがって、Jasper Reportはおそらく責任がありますが、私は考えがなくなり始めています。私は1つの問題を見つけました。これはこれに関連する可能性があります（https：//
community.jaspersoft.com/jaspersoft-studio/issues/8641）。しかし、私はこれに関して多くのことをすることができませんでしたセットアップ。私のWebアプリケーションはジャスパーエンジンを使ってレポートを作成していますが、そこにも問題があります。

StackOverflowの従業員、Highchartsの従業員、Jaspersoftの従業員は、あなたの知識を組み合わせてこの問題を解決するのに役立ちます！

最後に、生成されたレポートのジャスパーレポートスタジオの写真：

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.