Question about colorBy after data sorting - echarts

In this example with universalTransition turned on, after the pie chart of colorBy:'data' is sorted, it is inconsistent with the corresponding relationship between labels and colors in the bar chart, how to make their colors consistent.
Makepie will be out of service on February 15, you can run follow code on ECharts examples editor.
const dataset = {
dimensions: ['name', 'score'],
source: [
['Hannah Krause', 314],
['Zhao Qian', 351],
]
};
const pieOption = {
// dataset: [dataset],
// 顺序排序数据
dataset: [dataset].concat({
transform: {
type: 'sort',
config: { dimension: 'score', order: 'desc' },
},
}),
series: [
{
type: 'pie',
// 通过 id 关联需要过渡动画的系列
id: 'Score',
radius: [0, '50%'],
universalTransition: true,
animationDurationUpdate: 1000,
// 取排序后的数据
datasetIndex: 1,
}
]
};
const barOption = {
dataset: [dataset],
xAxis: {
type: 'category'
},
yAxis: {},
series: [
{
type: 'bar',
// 通过 id 关联需要过渡动画的系列
id: 'Score',
// 每个数据都是用不同的颜色
colorBy: 'data',
encode: { x: 'name', y: 'score' },
universalTransition: true,
animationDurationUpdate: 1000
}
]
};
option = barOption;
setInterval(() => {
option = option === pieOption ? barOption : pieOption;
// 使用 notMerge 的形式可以移除坐标轴
myChart.setOption(option, true);
}, 2000);

Your dataset order by 'desc' on pie chart.
but it's not used on bar chart.
Maybe your two charts should be sorted in the same order
dataset: [dataset].concat({
transform: {
type: 'sort',
config: { dimension: 'score', order: 'desc' },
},
}),

Related

Where in options to define a name for the name of the X axis from such a dataset

The chartjs documentation provides an example in which it is unclear where to define a name for the X-axis. For the Y-axes, everything is clear, and where to determine the name for the X-axis name from such a data set in the same way?
const data = [{x: 'Jan', net: 100, cogs: 50, gm: 50}, {x: 'Feb', net: 120, cogs: 55, gm: 75}];
const cfg = {
type: 'bar',
data: {
labels: ['Jan', 'Feb'],
datasets: [{
label: 'Net sales',
data: data,
parsing: {
yAxisKey: 'net'
}
}, {
label: 'Cost of goods sold',
data: data,
parsing: {
yAxisKey: 'cogs'
}
}, {
label: 'Gross margin',
data: data,
parsing: {
yAxisKey: 'gm'
}
}]
},
};

echarts stacked bar chart with time xaxis

Can someone check my chart options and suggest a way to make the time xaxis behave correctly? I've tried with timestamps, dates, timestamps / 1000 and nothing looks right
let sales = [
0,84,5,3,2,1,0,0,3,6
]
let listings = [
1,297,23,5,8,6,9,3,6,19
]
let ps = [
1663084060653,
1663089644329,
1663095228005,
1663100811680,
1663106395356,
1663111979032,
1663117562708,
1663123146384,
1663128730059,
1663134313735
]
let color = "red"
option = {
textStyle: {
color
},
legend: {
textStyle: {
color
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'time',
data: ps,
// axisLabel: {
// formatter: ts => new Date(ts).toTimeString().replace(/ .*/, '')
// }
}
],
yAxis: [
{
// type: 'value'
}
],
series: [
{
name: 'Sales',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: sales
},
{
name: "Listings",
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: listings
}
]
}
Your series (listings & sales here) have to have a [date, value] format. Also, you'll have to remove data from xAxis as it will automatically follow the dates that are given in the series.
So, in your example :
//convert listings & sales to a list of [date, value]
listings = listings.map((value, index) => {
return [ps[index], value]
})
sales = sales.map((value, index) => {
return [ps[index], value]
})
xAxis: [
{
type: 'time',
//data: ps, <--- remove this line
}
],

How to display multiple lines in eCharts using encode?

In eCharts, how do I modify the following option to show multiple lines in the chart? What I want is one line for product "Matcha Latte" and one line for "Cheese Cocao"? I would like to keep the dataset unchanged if possible.
option = {
legend: {},
tooltip: {},
dataset: {
dimensions: [{name:'product', type:'ordinal'}, {name:'date'},
{name:'value'}],
source: [
{product: 'Matcha Latte', 'date': 2016, 'value': 85.8},
{product: 'Matcha Latte', 'date': 2017, 'value': 73.4},
{product: 'Cheese Cocoa', 'date': 2016, 'value': 65.2},
{product: 'Cheese Cocoa', 'date': 2017, 'value': 53.9}
]
},
xAxis: {type: 'category', name: 'date'},
yAxis: {type: 'value', name: 'value'},
series: [
{type: 'line', encode: {x: 'date', y:'value'}},
]
};
you can you transform the dataset by using a filter:
option = {
legend: {},
tooltip: {},
dataset: [
{
dimensions: [
{ name: 'product', type: 'ordinal' },
{ name: 'date' },
{ name: 'value' }
],
source: [
{ product: 'Matcha Latte', date: 2016, value: 85.8 },
{ product: 'Matcha Latte', date: 2017, value: 73.4 },
{ product: 'Cheese Cocoa', date: 2016, value: 65.2 },
{ product: 'Cheese Cocoa', date: 2017, value: 53.9 }
]
},
{
fromDatasetIndex: 0,
transform: [
{
type: 'filter',
config: {
dimension: 'product',
value: 'Matcha Latte'
}
}
]
},
{
fromDatasetIndex: 0,
transform: [
{
type: 'filter',
config: {
dimension: 'product',
value: 'Cheese Cocoa'
}
}
]
}
],
xAxis: { type: 'category', name: 'date' },
yAxis: { type: 'value', name: 'value' },
series: [
{ datasetIndex: 1, type: 'line', encode: { x: 'date', y: 'value' } },
{ datasetIndex: 2, type: 'line', encode: { x: 'date', y: 'value' } }
]
};

apache echart with one month each year

Hello,
I am trying to make a line type chart.
With in axis a date in the format of one month over several years.
Ex July 2000, July 2001, July 2002 etc.
I have a data array with a [date, value] couple.
So with the example it gives
{
series: [{
type: 'line',
smooth: true,
data: [
[ {value: ['2000-07-01', 5884] } ],
[ {value: ['2001-07-01', 568] } ],
[ {value: ['2002-07-01', 5845884] } ]
]
}, {
type: 'line',
smooth: true,
data: [
[ {value: ['2000-07-01', 458] } ],
[ {value: ['2001-07-01', 5468] } ],
[ {value: ['2002-07-01', 588484] } ]
]
}]
}
and I defined in the x axis
{
xAxis: {
type: 'time',
axisLabel: {
formatter: (function(value){
return moment(value).format('MMM YYYY');
})
},
},
}
But on the x axis I get [August 2000, September 2001, October 2002]
How can I obtain the requested result?
Do I have to reformat my series and put my dates in the x axis label?
thx for help.
The required result can be obtained using category axis, if you can provide the data for all months without gap.
xAxis.axisLabel.interval property allows you to control the interval between the labels displayed.
Refer the chart configuration below,
option = {
xAxis: {
type: 'category',
axisLabel: {
formatter: (function(value){
//return mement(value).format('MMM YYYY');
return echarts.format.formatTime("MM-yyyy", value);
}),
interval: 0
},
},
yAxis: {
type: 'value',
},
series: [{
type: 'line',
smooth: true,
data: [
['2000-07-01', 5884],
['2001-07-01', 568],
['2002-07-01', 5845884]
]
}, {
type: 'line',
smooth: true,
data: [
['2000-07-01', 458],
['2001-07-01', 5468],
['2002-07-01', 588484]
]
}]
};

Only single series is shown

I used an example from the demo on highcharts website, and the only modifications are:
changed map to world.js
Commented "allAreas" property
$(function () {
// Instanciate the map
$('#container').highcharts('Map', {
chart: {
spacingBottom: 20
},
title : {
text : 'Europe time zones'
},
legend: {
enabled: true
},
plotOptions: {
map: {
//allAreas: false,
joinBy: ['iso-a2', 'code'],
dataLabels: {
enabled: true,
color: 'white',
formatter: function () {
if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
return this.point.properties['iso-a2'];
}
},
format: null,
style: {
fontWeight: 'bold'
}
},
mapData: Highcharts.maps['custom/world'],
tooltip: {
headerFormat: '',
pointFormat: '{point.name}: <b>{series.name}</b>'
}
}
},
series : [{
name: 'UTC',
id: 'UTC',
data: $.map(['IE', 'IS', 'GB', 'PT'], function (code) {
return { code: code };
})
}, {
name: 'UTC + 1',
data: $.map(['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU',
'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK'], function (code) {
return { code: code };
})
}, {
name: 'UTC + 2',
data: $.map(['FI', 'EE', 'LV', 'LT', 'BY', 'UA', 'MD', 'RO', 'BG', 'GR', 'TR', 'CY'], function (code) {
return { code: code };
})
}, {
name: 'UTC + 3',
data: $.map(['RU'], function (code) {
return { code: code };
})
}]
});
});
Code in JSFiddle
Why only single series is visible?
The line causing the issue is this: //allAreas: false.
This is the explanation and how to fix it (extract from the Highcharts support forum)
According to the API, setting allAreas to true will render all of
the areas so also the one without value (as null value). Another
option is the nullColor which by default is a shade of grey and sets
the color to be used by null values.
Therefore if you set allAreas to true, then each series will draw
all the areas and those with null values will be filled as grey (the
nullColor). Because the later series have a higher z-index these are
on top of the other series, resulting in a grey shape covering the
shapes beneath it.
If you want to set allAreas to true but still see through the
different series, you have to set the nullColor to transparent:
rgba(0,0,0,0)
Working JSFiddle here