enter image description here
As shown in the figure above, I need to remove the circle in the middle of the third icon, but keep the shape of the other two charts rectangular.But when I set legend.icon = 'line', the shape of the other two icons changed.What should I do?
Nobody in the world knows that you did wrong because no one has seen your code but legend supports separate icons for each series.
var option = {
//...
legend: {
data: [
{ name: 'Series1', icon: 'circle' },
{ name: 'Series2', icon: 'triangle' },
{ name: 'Series3', icon: 'diamond' },
]
}
//...
}
Related
How do I color each boxes individually in an echarts box-plot based on a function?
The following function works on a simple bar chart and colors the bars appropriately:
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
itemStyle: {
color: function(seriesIndex) {
return ProfessionColor[seriesIndex.name.split("_", 1).toString()]
},
},
}]
However, it does not work on a box-plot:
series: [{
name: 'boxplot',
type: 'boxplot',
datasetIndex: 1,
itemStyle: {
color: function(seriesIndex) {
return ProfessionColor[seriesIndex.name.split('_', 1)];
}
},
encode: {
tooltip: [1, 2, 3, 4, 5]
}
},
{
name: 'outlier',
type: 'scatter',
encode: {
x: 1,
y: 0
},
datasetIndex: 2
}
]
If I provide color: "red" rather than a function all boxes are colored red. This leads me to believe that it needs to happen in the transform.config which I can't find in the documents or tutorial.
Echarts Box-Plot currently
The link is the complete charts in its current form.
Apparently, echarts only allows scripting (i.e., using a function for) either the line color -- option itemStyle.borderColor or the fill color -- option itemStyle.color.
The difference between the two appears to be made by the value of the internal property BoxplotSeriesModel#visualDrawType. It is now set to "stroke", which means that borderColor can be set via a function.
Since you wanted to set the fill color, its value should be set to "fill". I searched a way to change that property - it was rather difficult for echarts don't document an API for extensions. Still, navigating the source code I came up with this hacky solution:
const BoxplotSeriesModel = echarts.ComponentModel.getClassesByMainType('series').find(cls=>cls.type==='series.boxplot');
const BoxplotSeriesModelFill = function(...args){
const _this = new BoxplotSeriesModel(...args);
_this.visualDrawType = 'fill';
return _this;
}
BoxplotSeriesModelFill.type = BoxplotSeriesModel.type;
echarts.ComponentModel.registerClass(BoxplotSeriesModelFill);
That's a "patch" to be applied at the beginning of your script, immediately after you have the echarts global defined.
Here's a forked version of your code that uses that patch. The only other change I made was to set a borderColor (can now only be a fixed value) to black.
This will not get you all the way, but if you add colorBy: "data" to your options and remove the itemStyle, it will look like this:
I am using echarts Angular version- ngx-echarts in my project. I want to catch click event done on a line graph. chartClick or any of the mouse event of ngx-echarts library is not working for line graphs but they are working for barGraphs. How can I catch click events in line graph using ngx-echarts
<div echarts [options]="chartOption"
(chartClick)="onChartEvent($event, 'chartClick')">
</div>
onChartEvent(event: any, type: string) {
console.log('chart event:', type, event);
}
Logical entity is not entering the onChartEvent function even when click is performed
You can do it by this way.
when you build your options, in series object populate:
series: [
{ // your bar
type: 'bar',
barWidth: '30%',
data: myData
},
{ // shadow bar
type: 'bar',
barWidth: '30%',
itemStyle: {
// transparent bar
normal: { color: 'rgba(0, 0, 0, 0)' }
},
barGap: '-100%',
data: myDataShadow,
animation: false
}
]
Where myDataShow is a copy of myData.
I recommend you put the biggest value in all positions of myDataShadow to make all bar clickable.
In the line chart the 'chartClick' event gets fired only if you click on the points of the lines.
Please go ahead and add the symbol, with that you can click over the point and the event would be triggered. Replace for example triangle over none as shown below:
private mySeries = {
type: 'line',
name: 'prod',
data: myData,
symbol: 'triangle',
itemStyle: {
color: '#35b53a'
}
};
In my app users can add/remove as many series they want to the HighStock component using a piece of UI I wrote. However, when a user adds multiple time-series and the legend is under the chart, it shrinks the chart's height (in favor of the legend). This way the overall height remains constant.
However, I'm interested in having the plotting area keeping the same height and still have the legend be under it, changing the overall height if needed.
code
Here's a fiddle to demo the issue.
Ideas?
set maxHeight property. this will fix the maximum height of legend and gives navigation to legend.
maxHeight: 100,
here is the fiddle http://jsfiddle.net/9vZ8F/2/
instead if you remove
layout:'vertical'
legend will not occupy much space
here is a fiddle for it http://jsfiddle.net/9vZ8F/1/
Hope this is useful to you.
How about doing a calculation on the number of series you have and adjusting the chart height based on that?
var series = [{
name: 'series 1',
data: usdeur
}, {
name: 'series 2',
data: usdeur
}, {
name: 'series 3',
data: usdeur
}, {
name: 'series 4',
data: usdeur
}, {
name: 'series 5',
data: usdeur
}
],
height = 400 + (series.length * 15);
$('#container').highcharts('StockChart', {
chart: {
borderWidth: 2,
height: height
},
legend: {
enabled: true,
layout: 'vertical'
},
navigator: {
//top: 200
},
rangeSelector: {
selected: 1
},
series: series
});
http://jsfiddle.net/SSn4e/
I am trying to display a search-form and grid in EXT-JS application. I am trying this:
items: [
{
title: 'myTab',
xtype: 'myform',
xtype:'mygrid',
flex:1
}
]
My Problem: When I comment out
xtype: 'mygrid'
I can see the search form. When I uncomment the line, grid overlaps the form. how can I solve this problem?
UPDATE: I see that I need to use vbox layout. I a m trying it in various ways, but unable to figure out where it should be placed.
You're mixing arrays (i.e. [...]), and objects (i.e. {...}).
The items option in Ext containers must be an array of objects. Objects in there can be raw configuration object or instantiated components.
So the syntax you must use looks like the following:
items: [
{
title: 'myTab',
xtype: 'myform'
},{
title: "Grid Tab",
xtype:'mygrid'
}
]
See, this is similar to an array of integers like [1,2,3] except that elements are objects {...} instead of numbers.
I figured it out. This is how I added layout to the code:
items: Ext.create('Ext.tab.Panel', {
activeTab: 0,
layout : { // This is how to save the form from being overlapped by the
//grid panel.
type: 'vbox',
align: 'fit'
},
items: [
{
title: 'Single-Activity Resource',
items : [
{
xtype:'myform'
},
{
xtype:'mygrid',
flex: 1
}
]
} ...
I'm wondering if it is possible to zoom in on a slice in a pie chart.
My chart is modeled after this example jsfiddle example
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x',
}
But it doesn't seem to work with pie charts. Am I missing something here?
Ideally, I would have a pie chart with 2 layers, where the outer layer serves as a child of the inner layer. When selecting a child slice, I could then have an entire pie chart showing that slice alone, along with its own children, etc.
Unfortunaltely zoom is not allowed for Pie Charts as its properties show you
x: to zoom in x-axis
y: to zoom in y-axis
xy: to zoom in both axes
but you can use size property with JavaScript to show zooming.
size property demo
I think I found what I was actually looking for. It isn't zoom, but rather the option of capturing click events on slices.
In order to do that, one must use the allowPointSelect attribute, which can be added to a pie chart like this (just one of several different ways):
plotOptions: {
pie: {
shadow: false,
allowPointSelect: true,
},
}
Then in order to capture clicks one has to declare the events attribute in the series being used:
series: [{
name: 'Example',
data: [
{
name: 'Firefox',
value: 45.0
},
{
name: 'IE',
value: 26.8
},
{
name: 'Chrome',
value: 12.8,
},
],
size: '100%',
point: {
events: {
click: function() {
// some code to execute when clicking a slice
alert('Slice name: ' + this.name + ' and value: ' + this.value);
}
}
}
}]
Then in that click function, any javascript code can be executed, and the declared fields in the data can also be accessed. So a second pie chart could theoretically be created on the fly.