search

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.63k stars 19.61k forks source link

need to get axisLabel.maxLabel #9429

Closed arashdalir closed 3 years ago

arashdalir commented 5 years ago

General Questions

In this issue, I have provided information with:

Issue Type

Issue Details

right now, it's not possible to programmatically check what the maximum label value for yAxis is (at least there is no documentation showing how to get it. as shown in the following example, we are trying to determine if some points of different series overlap, and if so, we want to use a bigger symbolSize to indicate that 2 points overlap. to do so, the function dynamicSymbolSize in my example is created. it works by normalizing the values defined as a seriesGroup by determining what the highest value of their corresponding yAxis is. this would have worked/will work ONLY IF yAxis.max is already predefined or by coincident, if the highest value is also the highest axisLabel. otherwise the normalization doesn't work as wished.

if you check my example, the part marked with //TODO is where I need a function like yAxis.getMaxLabel() or whatever it's called/is going to be called; or a property which delivers the set value.

Expected Behavior

the function yAxis.getMaxLabel() (or the property...) should deliver the maximum value used for labeling yAxis.

Current Behavior

I have not found any function/property that does this.

Online Example

https://jsfiddle.net/byn4eLvp/2/

var dynamicSymbolSize = function (value, params, dataHelper, basicSize, seriesGroup, chart){
    var default_value = basicSize;
    var multiplier = 1;
    var axisInfo = {
        max: {},
        axisSeries:{}
    };
    var j = 0;

    var seriesName = params.seriesName;

    if (typeof chart !== typeof undefined)
    {
        if (!chart.hasOwnProperty('axisInfo') || !chart.axisInfo || !chart.axisInfo.axisSeries.hasOwnProperty(seriesName))
        {
            if (chart.hasOwnProperty('axisInfo'))
            {
                axisInfo = chart.axisInfo;
            }

            var config = chart.getOption();

            console.log(config);

            for (var s = 0; s < config.series.length; s++)
            {
                var series = config.series[s];
                var index = null;
                if ((index = seriesGroup.indexOf(series.name)) !== -1)
                {
                    var col = series.name;

                    var yAxisIndex = series.yAxisIndex;

                    if (typeof yAxisIndex !== typeof undefined && yAxisIndex !== null)
                    {
                        var yAxis = config.yAxis[yAxisIndex];

                        var max = null;

                        if (yAxis.max)
                        {
                            max = yAxis.max;
                        }
                        else
                        {
                            //TODO: use yAxis.getMax() instead.
                            max = dataHelper.getMax(col); 
                        }
                        if (!axisInfo.max.hasOwnProperty(yAxisIndex))
                        {
                            axisInfo.max[yAxisIndex] = 0;
                        }
                        if (!axisInfo.axisSeries.hasOwnProperty(series.name))
                        {
                            axisInfo.axisSeries[series.name] = yAxisIndex;
                        }

                        axisInfo.max[yAxisIndex] = Math.max(axisInfo.max[yAxisIndex], max);
                    }
                }

            }

            chart.axisInfo = axisInfo;
        }
        else
        {
            axisInfo = chart.axisInfo;
        }
    }

    //<script>
    var row = dataHelper.find(dataHelper.getKeyColumn(), value[0]);

    if(row && seriesGroup)
    {
        row = row[0];

        // traverse the columns in reverse order - higher indices will be drawn on top of lower ones.

        for(j = seriesGroup.length - 1; j >= 0; j--)
        {
            var column = seriesGroup[j];

            if(column === seriesName)
            {
                break;
            }

            var seriesMax = 0;
            var columnMax = 0;
            if (axisInfo.max)
            {
                columnMax = axisInfo.max[axisInfo.axisSeries[column]];
                seriesMax = axisInfo.max[axisInfo.axisSeries[seriesName]];
            }

            var normalizedSeriesVal = seriesMax?(value[1]/seriesMax):0;
            var normalizedColumnVal = seriesMax?(row[column]/columnMax):0;

            if(Math.abs(normalizedColumnVal - normalizedSeriesVal) <= 0.005)
            {
                multiplier++;
            }
        }
    }

    return multiplier * default_value;
};
//<script>
var data_records_5bf2e4e667126_dup_5bf2e4e68d677 = new EChartsData({
    "source": [
        /*
        {
            "time": "2016-02-10 02:00:00.000000",
            "scenario": 1080,
            "scenario_name": "Inbound Authentication",
            "imsi_group_id": "1",
            "imsi_group_name": "HPLMN",
            "user_tot": "120",
            "user_ok": 68,
            "user_uc": 34,
            "user_nc": 2,
            "user_nok": "52",
            "user_nr": 16,
            "trans_tot": "139",
            "trans_ok": 78,
            "trans_uc": 39,
            "trans_nc": 2,
            "trans_suc": 78,
            "trans_nr": 20,
            "user_suc": 79.07
        }, {
            "time": "2016-02-10 03:00:00.000000",
            "scenario": 1080,
            "scenario_name": "Inbound Authentication",
            "imsi_group_id": "1",
            "imsi_group_name": "HPLMN",
            "user_tot": "110",
            "user_ok": 68,
            "user_uc": 38,
            "user_nc": 0,
            "user_nok": "42",
            "user_nr": 4,
            "trans_tot": "143",
            "trans_ok": 87,
            "trans_uc": 50,
            "trans_nc": 0,
            "trans_suc": 93.55,
            "trans_nr": 6,
            "user_suc": 94.44
        }, {
            "time": "2016-02-10 04:00:00.000000",
            "scenario": 1080,
            "scenario_name": "Inbound Authentication",
            "imsi_group_id": "1",
            "imsi_group_name": "HPLMN",
            "user_tot": "111",
            "user_ok": 77,
            "user_uc": 30,
            "user_nc": 0,
            "user_nok": "34",
            "user_nr": 4,
            "trans_tot": "136",
            "trans_ok": 93,
            "trans_uc": 34,
            "trans_nc": 0,
            "trans_suc": 91.18,
            "trans_nr": 9,
            "user_suc": 95.06
        },
        */
        {
            "time": "2016-02-10 05:00:00.000000",
            "scenario": 1080,
            "scenario_name": "Inbound Authentication",
            "imsi_group_id": "1",
            "imsi_group_name": "HPLMN",
            "user_tot": "114",
            "user_ok": 77,
            "user_uc": 33,
            "user_nc": 0,
            "user_nok": "37",
            "user_nr": 4,
            "trans_tot": "135",
            "trans_ok": 92,
            "trans_uc": 37,
            "trans_nc": 0,
            "trans_suc": 93.88,
            "trans_nr": 6,
            "user_suc": 95.06
        }, {
            "time": "2016-02-10 06:00:00.000000",
            "scenario": 1080,
            "scenario_name": "Inbound Authentication",
            "imsi_group_id": "1",
            "imsi_group_name": "HPLMN",
            "user_tot": "117",
            "user_ok": 78,
            "user_uc": 33,
            "user_nc": 0,
            "user_nok": "39",
            "user_nr": 6,
            "trans_tot": "143",
            "trans_ok": 100,
            "trans_uc": 36,
            "trans_nc": 0,
            "trans_suc": 93.46,
            "trans_nr": 7,
            "user_suc": 92.86
        }, {
            "time": "2016-02-10 07:00:00.000000",
            "scenario": 1080,
            "scenario_name": "Inbound Authentication",
            "imsi_group_id": "1",
            "imsi_group_name": "HPLMN",
            "user_tot": "126",
            "user_ok": 84,
            "user_uc": 35,
            "user_nc": 0,
            "user_nok": "42",
            "user_nr": 7,
            "trans_tot": "143",
            "trans_ok": 97,
            "trans_uc": 39,
            "trans_nc": 0,
            "trans_suc": 93.27,
            "trans_nr": 7,
            "user_suc": 92.31
        }, {
            "time": "2016-02-10 08:00:00.000000",
            "scenario": 1080,
            "scenario_name": "Inbound Authentication",
            "imsi_group_id": "1",
            "imsi_group_name": "HPLMN",
            "user_tot": "122",
            "user_ok": 82,
            "user_uc": 36,
            "user_nc": 0,
            "user_nok": "40",
            "user_nr": 4,
            "trans_tot": "132",
            "trans_ok": 87,
            "trans_uc": 39,
            "trans_nc": 0,
            "trans_suc": 93.55,
            "trans_nr": 6,
            "user_suc": 95.35
        }, {
            "time": "2016-02-10 09:00:00.000000",
            "scenario": 1080,
            "scenario_name": "Inbound Authentication",
            "imsi_group_id": "1",
            "imsi_group_name": "HPLMN",
            "user_tot": "120",
            "user_ok": 84,
            "user_uc": 31,
            "user_nc": 0,
            "user_nok": "36",
            "user_nr": 5,
            "trans_tot": "140",
            "trans_ok": 96,
            "trans_uc": 37,
            "trans_nc": 0,
            "trans_suc": 93.2,
            "trans_nr": 7,
            "user_suc": 94.38
        }
    ],
    "dimensions": [
        {
            "name": "time",
            "type": "time",
            "displayName": "Time",
            "color": null,
            "hide": false,
            "format": null
        }, {
            "name": "scenario",
            "type": "int",
            "displayName": "Scenario",
            "color": null,
            "hide": false,
            "format": null
        }, {
            "name": "user_ok",
            "type": "float",
            "displayName": "User OK",
            "color": null,
            "hide": false,
            "format": null
        }, {
            "name": "user_uc",
            "type": "float",
            "displayName": "User UC",
            "color": null,
            "hide": false,
            "format": null
        }, {
            "name": "user_nc",
            "type": "float",
            "displayName": "User NC",
            "color": null,
            "hide": false,
            "format": null
        }, {
            "name": "user_nr",
            "type": "float",
            "displayName": "User NR",
            "color": null,
            "hide": false,
            "format": null
        }, {
            "name": "user_suc",
            "type": "float",
            "displayName": "User Success",
            "color": null,
            "hide": false,
            "format": {"conversion_factor": 1, "type": "normal", "suffix": null, "format": 8, "momentJsFormat": null}
        }, {
            "name": "trans_ok",
            "type": "float",
            "displayName": "Trans OK",
            "color": null,
            "hide": false,
            "format": null
        }, {
            "name": "trans_uc",
            "type": "float",
            "displayName": "Trans UC",
            "color": null,
            "hide": false,
            "format": null
        }, {
            "name": "trans_nc",
            "type": "float",
            "displayName": "Trans NC",
            "color": null,
            "hide": false,
            "format": null
        }, {
            "name": "trans_nr",
            "type": "float",
            "displayName": "Trans NR",
            "color": null,
            "hide": false,
            "format": null
        }, {
            "name": "trans_suc",
            "type": "float",
            "displayName": "Trans Success",
            "color": null,
            "hide": false,
            "format": {"conversion_factor": 1, "type": "normal", "suffix": null, "format": 8, "momentJsFormat": null}
        }
    ],
    "keyColumn": "time"
});
data_records_5bf2e4e667126_dup_5bf2e4e68d677.setData(data_records_5bf2e4e667126_dup_5bf2e4e68d677.convert());
var line_chart1_inbound = echarts.init(document.getElementById('line_chart_1_inbound'), null, {
    "devicePixelRatio": null,
    "renderer": "svg",
    "width": 570,
    "height": 450
});

line_chart1_inbound.setOption({
    "dataZoom": [
        {"show": true, "xAxisIndex": [0, 1], "start": 0, "end": 100, "type": "inside"}, {
            "show": true,
            "xAxisIndex": [0, 1],
            "start": 0,
            "end": 100,
            "type": "slider"
        }
    ],
    "grid": [
        {
            "show": true,
            "left": "13%",
            "width": "85%",
            "top": 25,
            "height": 175,
            "borderColor": "transparent",
            "containLabel": "1"
        }, {
            "show": true,
            "left": "13%",
            "width": "85%",
            "top": 210,
            "height": 195,
            "borderColor": "transparent",
            "containLabel": "1"
        }
    ],
    "xAxis": [
        {
            "show": true,
            "gridIndex": 0,
            "type": "time",
            "scale": true,
            "axisLine": {"lineStyle": {"color": "#999999"}},
            "splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}},
            "splitNumber": "10"
        }, {
            "show": true,
            "gridIndex": 1,
            "type": "time",
            "scale": true,
            "axisLine": {"lineStyle": {"color": "#999999"}},
            "splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}}
        }
    ],
    "yAxis": [
        {
            "show": true,
            "gridIndex": 0,
            "type": "value",
            "name": "Users",
            "nameRotate": 90,
            "nameGap": 40,
            "nameLocation": "middle",
            "nameTextStyle": {"fontWeight": "bolder", "fontSize": 15},
            "axisLine": {"lineStyle": {"color": "#999999"}},
            "splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}},
            "splitNumber": "10"
        }, {
            "show": true,
            "gridIndex": 0,
            "type": "value",
            "max": 100,
            "axisLine": {"lineStyle": {"color": "#9a322e"}},
            "splitLine": {"show": false},
            "splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}},
            "splitNumber": "10"
        }, {
            "show": true,
            "gridIndex": 1,
            "type": "value",
            "name": "Transactions",
            "nameRotate": 90,
            "nameGap": 40,
            "nameLocation": "middle",
            "nameTextStyle": {"fontWeight": "bolder", "fontSize": 15},
            "axisLine": {"lineStyle": {"color": "#999999"}},
            "splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}},
            "splitNumber": "10"
        }, {
            "show": true,
            "gridIndex": 1,
            "type": "value",
            "max": 100,
            "axisLine": {"lineStyle": {"color": "#9a322e"}},
            "splitLine": {"show": false},
            "splitArea": {"areaStyle": {"color": ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]}},
            "splitNumber": "10"
        }
    ],
    "series": [
        {
            "name": "user_ok",
            "type": "line",
            "xAxisIndex": 0,
            "yAxisIndex": 0,
            "data": data_records_5bf2e4e667126_dup_5bf2e4e68d677.getColumn(['time', 'user_ok']),
            "hasValues": true,
            "itemStyle": {"color": "#00a650", "borderWidth": "2", "opacity": "1"},
            "symbol": "circle",
            "symbolSize": function (value, params){
                return dynamicSymbolSize(value, params, data_records_5bf2e4e667126_dup_5bf2e4e68d677, 4, ["user_ok",  "user_suc"], line_chart1_inbound);
            },
            "lineStyle": {"color": "#00a650", "width": "2", "type": "solid", "opacity": "1"}
        },
        {
            "name": "user_suc",
            "type": "line",
            "xAxisIndex": 0,
            "yAxisIndex": 1,
            "itemStyle": {"color": "#9a322e", "borderWidth": "2", "opacity": "1"},
            "data": data_records_5bf2e4e667126_dup_5bf2e4e68d677.getColumn(['time', 'user_suc']),
            "hasValues": true,
            "symbol": "circle",
            "symbolSize": function (value, params){
                return dynamicSymbolSize(value, params, data_records_5bf2e4e667126_dup_5bf2e4e68d677, 4, ["user_ok",  "user_suc"], line_chart1_inbound);
            },
            "lineStyle": {"color": "#9a322e", "width": "2", "type": "solid", "opacity": "1"}
        }, {
            "name": "trans_ok",
            "type": "line",
            "xAxisIndex": 1,
            "yAxisIndex": 2,
            "data": data_records_5bf2e4e667126_dup_5bf2e4e68d677.getColumn(['time', 'trans_ok']),
            "hasValues": true,
            "itemStyle": {"color": "#00a650", "borderWidth": "2", "opacity": "1"},
            "symbol": "circle",
            "symbolSize": function (value, params){
                return dynamicSymbolSize(value, params, data_records_5bf2e4e667126_dup_5bf2e4e68d677, 4, ["trans_ok", "trans_suc"], line_chart1_inbound);
            },
            "lineStyle": {"color": "#00a650", "width": "2", "type": "solid", "opacity": "1"}
        },
        {
            "name": "trans_suc",
            "type": "line",
            "xAxisIndex": 1,
            "yAxisIndex": 3,
            "itemStyle": {"color": "#9a322e", "borderWidth": "2", "opacity": "1"},
            "data": data_records_5bf2e4e667126_dup_5bf2e4e68d677.getColumn(['time', 'trans_suc']),
            "hasValues": true,
            "symbol": "circle",
            "symbolSize": function (value, params){
                return dynamicSymbolSize(value, params, data_records_5bf2e4e667126_dup_5bf2e4e68d677, 4, ["trans_ok", "trans_suc"], line_chart1_inbound);
            },
            "lineStyle": {"color": "#9a322e", "width": "2", "type": "solid", "opacity": "1"}
        }
    ],
    "title": [
        {
            "show": true,
            "text": "Inbound",
            "textStyle": {"fontSize": 15, "fontWeight": "bold", "color": "#306fb6"},
            "width": "100%",
            "top": "top",
            "left": "center",
            "subtextStyle": {
                "color": "#306fb6",
                "rich": {
                    "hr": {
                        "borderColor": "#999999",
                        "width": "100%",
                        "borderWidth": "1",
                        "height": "0",
                        "lineHeight": "10"
                    }
                }
            }
        }
    ],
    "backgroundColor": "#ffffff",
    "textStyle": {"color": "#306fb6"},
    "legend": {"show": "", "width": "80%", "top": "10%", "left": "center", "textStyle": {"color": "#306fb6"}}
});

Topics

Anything Else We Need to Know

Ahm, I don't think so, please ask if you need...

Environment

sxmpasch commented 5 years ago

This is perhaps not the best way to achieve this, but you could theoretically do something like the following:

let topPixel = myChart.getOption().grid[0].top;
let coord=myChart.convertFromPixel({seriesIndex:0},[0,topPixel]);
console.log(coord[1]);

This example gets the top pixel coordinate from the desired grid and converts then this pixel to the corresponding series y-coordinate. Since we are converting PIXELS to coords, I do not know how accurate this is for your use-case...

arashdalir commented 5 years ago

@sxmpasch well, this doesn't exactly work correctly. I tried the code with different charts we have. as long as I don't define the top value for the grid, this appears to work. but in many cases I have predefined percentage values for top to position the grid's location, for example '25%' or so on. I haven't found a way to convert them info coordinates properly. any suggestions?

sxmpasch commented 5 years ago

@arashdalir - ok, percentage to absolute pixel. You just have to calculate this against the total height of the echarts instance:

                    let topPixel=myChart.getOption().grid[1].top
                    if (topPixel.indexOf('%')>=0) {
                        topPixel=topPixel.substr(0,topPixel.length-1);
                        topPixel=parseInt(topPixel)/100*myChart.getHeight();
                    }
                    console.log(topPixel)
                    let coord=myChart.convertFromPixel({seriesIndex:0},[0,topPixel]);
                    console.log(coord[1]);
arashdalir commented 5 years ago

thanks @sxmpasch. tbh didn't notice the getHeight() function and didn't know exactly how the convertFromPixel works. this is working for now, I have not checked all the chart types in our system though; would report back if there are any other issues.

@arashdalir - ok, percentage to absolute pixel. You just have to calculate this against the total height of the echarts instance:

                    let topPixel=myChart.getOption().grid[1].top
                    if (topPixel.indexOf('%')>=0) {
                        topPixel=topPixel.substr(0,topPixel.length-1);
                        topPixel=parseInt(topPixel)/100*myChart.getHeight();
                    }
                    console.log(topPixel)
                    let coord=myChart.convertFromPixel({seriesIndex:0},[0,topPixel]);
                    console.log(coord[1]);
stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

github-actions[bot] commented 3 years ago

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!