带有 Highcharts 分析行为的 OBIEE 仪表板

问题描述

我在 OBIEE 12 中有 2 个分析，我必须将它们放在同一个仪表板中。它们都包含使用 Highcharts 的叙述性 Javascript。它看起来像这样： 前缀：

<script src="mypath/exporting.js"></script>
<script src="mypath/export-data.js"></script>
<script src="mypath/accessibility.js"></script>
<script src="mypath/highcharts-3d.js"></script>
<script src="mypath/jquery-3.1.1.min.js"></script>
<div id="ME5parentdiv" style="position:relative;width:100%; height:100%; margin: 0 auto">
<div id="ME5selectordiv" style="float:left;font-family: "Montserrat"; margin-left:5px;" >
<label style="color: white; ">Select Year: </label>
<select id="ME5yearSelector" onchange="onYearSelected(this.value)"></select>
</div>
<div id="ME5" style="min-width: 1850px;max-width: 300px;height: 800px;margin: 0 auto"></div>
</div>
<script>
var cat =[];
var pdata = [];
var pdata2 = [];
var today = new Date();
var yyyy = today.getFullYear();
var yearsList = ["All"];
var select = document.getElementById("ME5yearSelector");
var option;
var fcat=cat;
var fpdata = pdata;
var fpdata2 = pdata2;

叙述：

cat.push('@1');
pdata.push(@2);
pdata2.push(@3);
yearsList .push('@5');

后缀：

yearsList = yearsList.filter((item,index,self) => self.indexOf(item) == index);
yearsList .forEach(populateYears);

function populateYears(item) {
    option = document.createElement('option');
    option.value = item;
    option.innerHTML = item;
    select.appendChild(option);
}
function onYearSelected(yearParam) {
    var filterIndices = [];
    if (yearParam != "All") {
        //get indices of data subsets in a given year
        filterIndices = cat.reduce((filterIndices,e,i) => (e.includes(yearParam) && filterIndices.push(i),filterIndices),[]);
        //redraw chart with only subsets
    }
    redrawChart(filterIndices);
}

function redrawChart(filterIndices = []) {
    if (filterIndices && filterIndices.length) {
        fcat = filterIndices.map(i => cat[i]);
        fpdata = filterIndices.map(i => pdata[i]);
        fpdata2 = filterIndices.map(i => pdata2[i]);
    } else {
        fcat = cat;
        fpdata = pdata;
        fpdata2 = pdata2;
    }
    chart1.xAxis[0].setCategories(fcat);
    chart1.series[0].setData(fpdata,true);
    chart1.series[1].setData(fpdata2,true);
}
var chart1 =  Highcharts.chart('ME5',{
         
      title: {
                text: "<span style='font-Family:Montserrat'>ME5</span>",style: {
                    color: 'white',fontWeight: 'bold',fontSize: '30px',}

            },rangeSelector: {
        enabled: true,allButtonsEnabled: true,selected: 1,buttons: [{
            type: 'day',count: 30,text: 'Last 30 days'
        },{
            type: 'all',text: 'All'
        }],verticalAlign: 'bottom',buttonPosition: {
            align: 'center',y: 12,},inputEnabled: false,buttonSpacing: 30,buttonTheme: {
            style: {
                fill: 'none',color: '#595959',stroke: 'none',padding: 10,height: 18,width: null,'stroke-width': 0,r: 10,states: {
                hover: {
                    fill: '#0ec3ee',style: {
                        color: 'white'
                    }
                },select: {
                    fill: '#16aed2',style: {
                        color: 'white'
                    }
                }
            }
        },xAxis: {
            categories: fcat,lineColor: '#FFFFFF',lineWidth: 1.5,labels: {
            rotation: 90
        },events: {
                setExtremes: function(e) {
                    console.log(this);
                    if(typeof(e.rangeSelectorButton)!== 'undefined')
                    {
                      alert('count: '+e.rangeSelectorButton.count + 'text: ' +e.rangeSelectorButton.text + ' type:' + e.rangeSelectorButton.type);
                    }
                }
            }
        },rangeSelector: {
            selected: 1
        },yAxis: [{
            title: {
                text: null,labels: {
                enabled: false
            },opposite: false,{ // Secondary yAxis
        gridLineWidth: 0,title: {
            text: null,opposite: true,}],tooltip: {
            shared: true,useHTML: true,headerFormat: '<span style="font-Family:Montserrat;font-size:14px">{point.x}</span><br />',pointFormat: '<span style="color:{series.color};font-Family:Montserrat;font-size:16px"></span><b>{point.y}</b><br />'

        },plotOptions: {
        
        series: {
             minPointLength: 3,label: {
                connectorAllowed: false
            },line: {
                dataLabels: {
                    enabled: false
                },enableMouseTracking: true
            }
        }},credits: {
            enabled: false
        },series: [{
            name: 'ME5',type: 'column',showInLegend: true,color: '#4DB5C0',//yAxis: 1,data: fpdata,minPointLength: 5,enableMouseTracking: true,//   shadow: true,tooltip: {
                valueDecimals: 2,//valueSuffix: '  AED B'
            }
        },{
            name: 'Growth',type: 'spline',color: '#FFCC99',yAxis: 1,data: fpdata2,valueSuffix: ' % '
            }
             
        }
        
        ]

    
    });

 if (chart1.series) {
        $(chart1.series[0].data).each(function (i,e) {
            if (e.category.indexOf(yyyy) >= 0) {
                e.graphic.attr({ fill:'#347BCC' });
                e.graphic.attr({ color: '#347BCC'});
                e.graphic.attr({ fillColor: '#347BCC' });
            }
        });
    }
</script>

第二个图表几乎相同，但标签 ID 不同。 每个图表都可以独立运行，但每当我将它们都添加到仪表板时，顶部图表中的选择会更改第二个图表但不会更改其本身，更改时下方的选择器会同时更改两者。

我还是 Highcharts 和 OBIEE 的新手，无法弄清楚为什么仪表板会搞乱行为。

另一个问题： 为什么无论我更改 CSS 还是 OBIEE 设置，页面内的图表都不会响应？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）