You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2021/07/01 02:13:14 UTC
[GitHub] [echarts] whp1991 opened a new issue #15268: 堆叠柱状图：formatter函数中获取stack的值
whp1991 opened a new issue #15268:
URL: https://github.com/apache/echarts/issues/15268
### What problem does this feature solve?
在tooltip的formatter函数中能够获取stack的值，根据stack的值，只显示当前stack的信息，现有功能只能显示所有信息
### What does the proposed API look like?
在formatter(params)的参数中添加stack的属性及其值
<!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] echarts-bot[bot] commented on issue #15268: 堆叠柱状图：formatter函数中获取stack的值
Posted by GitBox <gi...@apache.org>.
echarts-bot[bot] commented on issue #15268:
URL: https://github.com/apache/echarts/issues/15268#issuecomment-871857509
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] SnailSword commented on issue #15268: 堆叠柱状图：formatter函数中获取stack的值
Posted by GitBox <gi...@apache.org>.
SnailSword commented on issue #15268:
URL: https://github.com/apache/echarts/issues/15268#issuecomment-871890967
```javescript
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
var data4 = [];
for (var i = 0; i < 10; i++) {
xAxisData.push('Class' + i);
data1.push((Math.random() * 2).toFixed(2));
data2.push((Math.random() * 5).toFixed(2));
data3.push((Math.random() + 0.3).toFixed(2));
data4.push(Math.random().toFixed(2));
}
var emphasisStyle = {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0,0,0,0.3)'
}
};
var getStackByName = (name) => {
return name.split('-')[0];
}
option = {
brush: {
toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
xAxisIndex: 0
},
toolbox: {
feature: {
magicType: {
type: ['stack', 'tiled']
},
dataView: {}
}
},
tooltip: {
formatter: ({ seriesName, value }) => {
return getStackByName(seriesName) + ':' + value;
},
},
xAxis: {
data: xAxisData,
name: 'X Axis',
axisLine: {onZero: true},
splitLine: {show: false},
splitArea: {show: false}
},
yAxis: {},
grid: {
bottom: 100
},
series: [
{
name: 's1-1',
type: 'bar',
stack: getStackByName('s1-1'),
emphasis: emphasisStyle,
data: data1
},
{
name: 's1-2',
type: 'bar',
stack: getStackByName('s1-2'),
emphasis: emphasisStyle,
data: data2
},
{
name: 's2-1',
type: 'bar',
stack: getStackByName('s2-1'),
emphasis: emphasisStyle,
data: data3
},
{
name: 's2-2',
type: 'bar',
stack: getStackByName('s2-2'),
emphasis: emphasisStyle,
data: data4
}
]
};
myChart.on('brushSelected', renderBrushed);
function renderBrushed(params) {
var brushed = [];
var brushComponent = params.batch[0];
for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
var rawIndices = brushComponent.selected[sIdx].dataIndex;
brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
}
myChart.setOption({
title: {
backgroundColor: '#333',
text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
bottom: 0,
right:'10%',
width: 100,
textStyle: {
fontSize: 12,
color: '#fff'
}
}
});
}
```
可以像上面的`getStackByName`函数做的那样，用一个函数或映射，把`stack`信息和`seriesName`或其他属性关联起来。
You can try to associate stack information with seriesName or other attributes by a map or a getter function, as what `getStackByName` function does above.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] whp1991 commented on issue #15268: vue中使用堆叠柱状图：formatter函数中过去不到this,如何获取stack的值
Posted by GitBox <gi...@apache.org>.
whp1991 commented on issue #15268:
URL: https://github.com/apache/echarts/issues/15268#issuecomment-872001444
> ```
> var xAxisData = [];
> var data1 = [];
> var data2 = [];
> var data3 = [];
> var data4 = [];
>
> for (var i = 0; i < 10; i++) {
> xAxisData.push('Class' + i);
> data1.push((Math.random() * 2).toFixed(2));
> data2.push((Math.random() * 5).toFixed(2));
> data3.push((Math.random() + 0.3).toFixed(2));
> data4.push(Math.random().toFixed(2));
> }
>
> var emphasisStyle = {
> itemStyle: {
> shadowBlur: 10,
> shadowColor: 'rgba(0,0,0,0.3)'
> }
> };
>
> var getStackByName = (name) => {
> return name.split('-')[0];
> }
>
> option = {
> brush: {
> toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
> xAxisIndex: 0
> },
> toolbox: {
> feature: {
> magicType: {
> type: ['stack', 'tiled']
> },
> dataView: {}
> }
> },
> tooltip: {
> formatter: ({ seriesName, value }) => {
> return getStackByName(seriesName) + ':' + value;
> },
> },
> xAxis: {
> data: xAxisData,
> name: 'X Axis',
> axisLine: {onZero: true},
> splitLine: {show: false},
> splitArea: {show: false}
> },
> yAxis: {},
> grid: {
> bottom: 100
> },
> series: [
> {
> name: 's1-1',
> type: 'bar',
> stack: getStackByName('s1-1'),
> emphasis: emphasisStyle,
> data: data1
> },
> {
> name: 's1-2',
> type: 'bar',
> stack: getStackByName('s1-2'),
> emphasis: emphasisStyle,
> data: data2
> },
> {
> name: 's2-1',
> type: 'bar',
> stack: getStackByName('s2-1'),
> emphasis: emphasisStyle,
> data: data3
> },
> {
> name: 's2-2',
> type: 'bar',
> stack: getStackByName('s2-2'),
> emphasis: emphasisStyle,
> data: data4
> }
> ]
> };
>
> myChart.on('brushSelected', renderBrushed);
>
> function renderBrushed(params) {
> var brushed = [];
> var brushComponent = params.batch[0];
>
> for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
> var rawIndices = brushComponent.selected[sIdx].dataIndex;
> brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
> }
>
> myChart.setOption({
> title: {
> backgroundColor: '#333',
> text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
> bottom: 0,
> right:'10%',
> width: 100,
> textStyle: {
> fontSize: 12,
> color: '#fff'
> }
> }
> });
> }
> ```
>
> 可以像上面的`getStackByName`函数做的那样，用一个函数或映射，把`stack`信息和`seriesName`或其他属性关联起来。
>
> You can try to associate stack information with seriesName or other attributes by a map or a getter function, as what `getStackByName` function does above.
Thank you for your reply, but I want to show all the information of each stack column, not the information of each item
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org