question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can I control the order of stack line charts with an attribute?

See original GitHub issue

What problem does this feature solve?

if I dynamically add a line, but the line is always at the top of the stack.

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },

        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
setTimeout(function() {
    myChart.setOption({
        series: [{        
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        }].concat(option.series)
    })
    
}, 1000);

I want series-line ‘联盟广告’ at the bottom

online demo https://codesandbox.io/s/5k8zxkv89n?fontsize=14

What does the proposed API look like?

series: [
        {
            index: 0 // Control stack line order
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
]

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
alex2wongcommented, Oct 6, 2019

@tz310200 After diving into source code around https://github.com/alex2wong/incubator-echarts/blob/master/src/util/model.js#L150 for a while.

I suppose this mappingToExists function has ability to merge new chart option to existing ones by series.id attr. Which means you can specify the series of data you wanna put at bottom with the same id as the previous bottom one. then the new series would be rendered at its new order.

For instance, I provide a new forked codesandbox. https://codesandbox.io/s/echarts-series-stackid-g8dvh

You can see the new added series are rendered replacing the previous bottom one… wish it help, thx

0reactions
MyCupOfTeaOocommented, Oct 9, 2019

随附的文档参考:https : //www.echartsjs.com/zh/option.html#series-line.id

awesome, thank you

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can I control the order of stack line charts with an attribute?
If I dynamically add a line, but the line is always at the top of the stack. option = { title: ... index:0,...
Read more >
A Complete Guide to Stacked Bar Charts | Tutorial by Chartio
Stacked bar charts extend the standard bar chart by dividing each bar into multiple subcategories. Learn how to best use this chart type...
Read more >
Excel Stacked Line Charts - W3Schools
Stacked Line charts are used with data which can be placed in an order, from low to high. The charts are used when...
Read more >
How to custom sort stacked segments in a stacked bar/column ...
User wants to control the order in which columns appear in stacked visualizations. The stacked charts are sorted in alphabetical order by ...
Read more >
Sorting Segments Within Stacked Bars by Value
By default, stacked bar charts sort along the total for the dimension in the Color shelf. Discuss this article... Feedback Forum. Did this ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found