如何在 Oracle Apex 中使用 static ID 定位圖表系列？

Question

I am using Oracle Apex to build a web application now, and I want to use Javascript to add a style class to a chart series after click one button. 根據通過 Javascript 添加過濾器到交互式網格，我知道可以通過static id找到該區域並進行操作。 因此，我給圖表系列提供了 static ID，我想知道如何定位圖表系列，並在動態操作中使用 Javascript 向圖表添加樣式 css。

更新：

基於 Sample Charts (Area) 示例，我創建了一個名為change color的按鈕，並定義了一個動態操作，該操作將在單擊該按鈕時觸發。 真正的動作是執行 Javascript 代碼，如下所示：

    $(function( options ) {

    // Setup a callback function which gets called when data is retrieved, to manipulate the series data
    options.dataFilter = function( data ) {
        data.series[ 0 ].color = "#90ee90";
        return data;
    };

    return options;
});

執行 Javascript 后， data.series[0]應更改為綠色。 然而，行刑后什么都沒有發生。

Answer 1

您應該使用 JavaScript，而不是 CSS... 登錄到您的 APEX 工作區，單擊應用程序庫選項卡，然后安裝示例圖表應用程序。 安裝完成后，單擊運行。 登錄應用程序，單擊導航菜單中的區域，然后單擊 select 區域圖表顏色（JavaScript 代碼自定義）選項卡。 這可能是您開始的最佳地點。

Go to edit the page, select the Attributes for the Area Chart (Color JavaScript Code Customization) region, then scroll down to Advanced > JavaScript Initialization Code. 在那里，您將看到以下代碼：

function( options ) {

    // Setup a callback function which gets called when data is retrieved, to manipulate the series data
    options.dataFilter = function( data ) {

        data.series[ 0 ].color = "#ED6647";
        data.series[ 0 ].borderColor = "#0F3248";
        data.series[ 0 ].markerDisplayed = "on";
        data.series[ 0 ].markerShape = "plus";
        data.series[ 0 ].markerColor = "red";
        data.series[ 0 ].markerSize = 8;
        data.series[ 0 ].pattern = "smallChecker";
        return data;
    };

    return options;
}

See the JET API doc to learn more about the options for a series: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojChartSeries.html

如果您在初始化后嘗試更改顏色，則需要使用option方法來獲取系列的數組。 從那里，您可以更新所需系列的 color 屬性，然后調用refresh方法來更新 DOM。

var series = apex.region("area1").widget().ojChart('option', 'series');

series[0].color = '#ED6647';

apex.region("area1").widget().ojChart('refresh');