The series.label.formatter function passes in data from the wrong series.

kevinw0123 commented 5 years ago

General Questions

Issue Type

[ ] I have a question to ask about how to use ECharts to ...；我想提问如何使用 ECharts 实现某功能
[x] I have a bug to report；我想要报 bug
[ ] I have a feature to request, e.g.: I'd like a new feature that ...；我需要一个新功能
[ ] I have a feature to enhance, e.g.: The current feature should be improved in the way that ...；我希望改进某个功能
[ ] There's something wrong with the documents；文档有些问题
[ ] Others, or I'm not sure which issue types to choose here；其他，或我不知道应该选什么类型

Issue Details

The series.label.formatter function passes in data from the wrong series.

When I try to access the data passed back from the formatter, the data in the component is from series[dataIndex], rather than series[seriesIndex]. Even though the seriesIndex values and dataIndex values are correct, the data in the component is wrong. Notice how the labels don't match up with the formatted values.

Expected Behavior

The first digit of data is the series index, and the second digit is the data index. The formatter is supposed to pass in the series[seriesIndex] for the dataset. This should show 11, 12, 13 for the first graph. Instead, it's showing 11, 22, 13, since it's trying to access the wrong series.

Current Behavior

N/A

Online Example

https://codepen.io/kevinw0123/pen/exVGqv

...
series: [
  {
    label: 
      {
        show: 'true', 
        position: 'top', 
        formatter: function (component) {
          console.log(component);
          var i = component.dataIndex+1;
          return component.value[i];
        }
    }
  },
  ...

Topics

Anything Else We Need to Know

Environment

ECharts version；ECharts 版本: 4.2.0-rc.2
[ ] It happens only on certain browsers or operating systems. 对于特定浏览器或操作系统才会出现的问题，请提供相应环境信息：{BROWSER_VERSION_OR_OS_INFORMATION_HERE}

kevinw0123 commented 5 years ago

Is there any update on this @Ovilia ?

Ovilia commented 5 years ago

I'm not sure what halflen means, but you should access series index by component.seriesIndex and data index by component.dataIndex.

kevinw0123 commented 5 years ago

I updated the example to make the issue more clear. Please take another look. The values returned from component.value are from the incorrect series.

The correct values should returned from the formatter in the left graph should be 11, 12, 13. However, what's being displayed is 11, 22, and 13. This is because the data values in the formatter's component object are coming from series[dataIndex], when it should be returning data from series[seriesIndex].

@Ovilia

Ovilia commented 5 years ago

@100pah Please have a look at this.

echarts-bot[bot] commented 5 years ago

This issue is not created using issue template so I'm going to close it. 🙊 Sorry for this, but it helps save our maintainers' time so that more developers get helped. Feel free to create another issue using the issue template.

这个 issue 未使用 issue 模板创建，所以我将关闭此 issue。为此带来的麻烦我深表歉意，但是请理解这是为了节约社区维护者的时间，以更高效地服务社区的开发者群体。如果您愿意，可以请使用 issue 模板重新创建 issue。

kevinw0123 commented 5 years ago

@Ovilia can you help reopen this issue? I accidentally clicked on one of the check boxes and the echarts robot closed the issue..

Ovilia commented 5 years ago

@kevinw0123 Sorry for the trouble. The robot listened on the issue editing, and closed after he thought this was not using the new template. Your clicking checkbox changed the issue so that triggered robot logic. I've now removed the issue edit listener and hope this will no longer confuse the old issues.

Ovilia commented 5 years ago

This issue still needs attention of @100pah .

kevinw0123 commented 5 years ago

@Ovilia @100pah Any update?

100pah commented 5 years ago

@kevinw0123

I think it will make it more clearly if change the demo to be:

formatter: function (component) {
    // console.log(component);
    // var i = component.dataIndex+1;
    return component.value.join('||'); // print all content of value.
}

When using seriesLayoutBy: 'row', each row of the dataset.source is mapped to a series, and each column is a "data item", which is exactly the "component.value" above.

So in the first series, the formatter should be:

formatter: function (component) {
    return component.value[1];
}

while in the second series, the formatter should be:

formatter: function (component) {
    return component.value[2];
}

apache / echarts