I want to add a new value in the tooltip, but I don't want to show the value in the chart. I searched but i did not find any solution. for example:
{
show: false,
name: '利润',
type: 'bar',
label: {
show: true,
position: 'inside'
},
data: [20, 17, 24, 24]
},
{
name: '收入',
type: 'bar',
stack: '总量',
label: {
show: true
},
data: [320, 302, 341, 374]
},
{
name: '支出',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'left'
},
data: [120, 132, 101, 134]
}
can i add show:false or different things?
my echarts version is ^3.8.5.
Actually this can be done by reformatting your series data and customize tooltip formatter function. You can take a look at this case and make your own adjustment.
For example, data with higher dimension can be added like this:
data: [
['Mon', 120, 0],
['Tue', 200, 1],
['Wed', 150, 2],
['Thu', 80, 3],
['Fri', 70, 4],
['Sat', 110, 5],
['Sun', 130, 6],
],
Data with dimension index 0 and 1 will be plotted in the series, but dimension 2 will not shown.
Then make custom tooltip formatter function. For example:
formatter: function(params) {
return `
${params.seriesName}:<br />
Day: ${params.value[0]}<br />
Value: ${params.value[1]}<br />
New Value: ${params.value[2]}<br />
`
}
Complete example:
option = {
xAxis: {
type: 'category',
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'item',
formatter: function(params) {
return `
${params.seriesName}:<br />
Day: ${params.value[0]}<br />
Value: ${params.value[1]}<br />
New Value: ${params.value[2]}<br />
`
}
},
series: [{
data: [
['Mon', 120, 0],
['Tue', 200, 1],
['Wed', 150, 2],
['Thu', 80, 3],
['Fri', 70, 4],
['Sat', 110, 5],
['Sun', 130, 6],
],
name: 'MySeries',
type: 'bar'
}]
};
Result:
See on Imgur
maybe custom series it worked but i couldn't find examples about bar chart. there is an example in the site but the example is about gantt chart.
You cannot find this one or similar settings because they should not exist. It's breaking the main dataviz concept: visualization should simplify rather than complicate the perception of data. You cannot to hide the same data for one place and show it in the another in common context. User don't understand what is the reason of this inconsistence and will stop to trusting your chart.
But if you insist, then make the desired like this:
legend: {
data: [{
name: '直接访问',
textStyle: {
color: 'red'
}
},
{
name: '邮件营销',
textStyle: {
color: 'green'
}
}
// [...]
]
}
and for hidden series:
series: [
{
name: '直接访问',
type: 'bar',
data: [0, 0, 0, 0, 0, 0, 0],
},
// {...}
]
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: [{
name: '直接访问',
textStyle: {
color: 'red'
}
},
{
name: '邮件营销',
textStyle: {
color: 'green'
}
}
// [...]
],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
series: [{
name: '直接访问',
type: 'bar',
data: [0, 0, 0, 0, 0, 0, 0],
},
{
name: '邮件营销',
type: 'bar',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: '总量',
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: '搜索引擎',
type: 'bar',
stack: '总量',
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
Related
I'm trying to create a percentile chart, ie a chart with some lines corresponding to each percentile. Given a user input, I want to show their mark in the chart with a dot.
So basically, my question is: Is it possible to place a dot in a multiple line chart? If so, how do I do it?
var lineChart = new Chart(myChart2, {
type: 'line',
data: {
labels: ['6', '7', '8', '9', '10', '11'],
datasets: [ {
label: "50th",
data: [20, 22, 28, 26, 25, 26],
borderColor: '#166ab5',
fill: false
}, {
label: "90th",
data: [72, 74, 68, 75, 74, 78],
borderColor: '#00FF00',
fill: false
}, {
label: "10th",
data: [2, 2, 5, 4, 6, 5],
borderColor: '#FF0000',
fill: false
}]
},
options: {
title: {
text: "Percentile",
display: true
},
legend: {
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: '26',
borderColor: 'tomato',
borderWidth: 1
}],
drawTime: "afterDraw" // (default)
}
}
});
How to merge the two data as one series in eharts?
here's the code:
option = {
title: {
text: '堆叠区域图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Data1']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Data1',
type: 'line',
stack: '总量',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Data2',
type: 'line',
stack: '总量',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
what I'm trying to do is to merge/combine the two different data in one series and when they are already combine how to define if its data1 or data2?
sample output:
Here's the code:
option = {
title: {
text: '堆叠区域图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
selected: {
'邮件营销': false
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
What I want to do is when I click the 邮件营销 it should show the series and disabled/hide all the other legend except the 邮件营销 that I clicked.
enter image description here
and when I click the other legend the 邮件营销 will disabled/hide the series and it will show the series that I clicked.
enter image description here
but when I clicked the 邮件营销 again it will hide/disabled the other legends.
I am assuming you need a chart where you want to see the details of only clicked legend. When user click on legend A, then type A should be visible on screen. And if user clicks on legend B, then type B data should be visible only visible on screen.
We can you legendselectedchange event to detect the change event and correspondingly set the chart. I have attached the code below, I hope it helps you.
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
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: [220, 182, 191, 234, 290, 330, 310]
},
{
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]
}
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
myChart.on('legendselectchanged', function (params) {
console.log(params);
selectGraph(params);
unselectGrap(params);
});
function selectGraph(params) {
myChart.dispatchAction({
type: 'legendSelect',
// legend name
name: params.name,
})
}
function unselectGrap(params) {
for (const legend in params.selected) {
if(legend !== params.name) {
myChart.dispatchAction({
type: 'legendUnSelect',
// legend name
name: legend,
})
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
I have a group chart
I want to show images on top of each
So there are only two images, so the value in xaxis subcategories if the value is negative i want to show image2 and if value is positive show image1
I have seen this answer but cant figure out this in group chart
highchart: add images to top of chart on every column
My group chart Fiddle
http://jsfiddle.net/KWPsv/90/
My Code:
Highcharts.setOptions({
colors: [
'#5a9bd4',
'#faa75b',
'#7ac36a',
'#9e67ab',
'#f15a60',
'#ce7058',
'#d77fb4'
]
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Chart Title'
},
credits: {
enabled: false
},
legend: {},
tooltip: {
shared: true,
formatter: function() {
var s = [],
xAxis = this.points[0].series.xAxis,
categoryIndex = xAxis.categories.indexOf(this.x),
title = this.x,
subTitle = xAxis.options.subtitles[categoryIndex];
s.push(title + '<br>');
s.push(subTitle + '<br>');
$.each(this.points, function(i, point) {
s.push('<span style="color:#D31B22;font-weight:bold;">' + point.series.name + ' : ' +
point.y + '<span>');
});
return s.join(' and ');
},
},
plotOptions: {
series: {
shadow: false,
borderWidth: 0,
pointPadding: 0
}
},
xAxis: {
subtitles: ['2', '-1', '4', '-3', '7'],
categories: ['MainTask 1', 'MainTask2', 'MainTask3', 'MainTask4', 'MainTask5'],
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickLength: 3,
title: {
text: 'X Axis Title',
style: {
color: '#333'
}
}
},
yAxis: {
lineColor: '#999',
lineWidth: 1,
tickColor: '#666',
tickWidth: 1,
tickLength: 3,
gridLineColor: '#ddd',
title: {
text: 'Y Axis Title',
rotation: 0,
margin: 50,
style: {
color: '#333'
}
}
},
series: [{
y: 0,
mydata: 10,
name: 'Designation 1',
data: [7, 12, 16, 32, 64]
}, {
y: 0,
mydata: 20,
name: 'Designation 2',
data: [16, 32, 64, 7, 12]
}, {
y: 0,
mydata: 30,
name: 'Designation 3',
data: [32, 64, 7, 12, 16],
}, {
mydata: 13,
name: 'Designation 4',
data: [7, 12, 16, 32, 64]
}, {
y: 0,
mydata: 23,
name: 'Designation 5',
data: [16, 32, 64, 7, 12]
}, {
y: 0,
mydata: 22,
name: 'Designation 6',
data: [32, 64, 7, 12, 16]
}]
});
Simply use Renderer.image to add an image on a chart. You can do that for example on load event.
API Reference:
http://api.highcharts.com/highcharts/chart.events.load
http://api.highcharts.com/highcharts/Renderer.image
Example:
http://jsfiddle.net/kudxL3kh/
I have created a donut chart using the highcharts library.
I need to have two different datalabels, one outside how it is at the moment and another datalabel on the inside.
Expected outcome:
Here is a fiddle: http://jsfiddle.net/FQxf4/
JS:
$(function () {
$('#container5').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: false,
alpha: 0
}
},
colors: ['#081969', '#0e2569', '#1e3b81', '#284893', '#30509b'],
title: {
text: ''
},tooltip: {
enabled: false
},
plotOptions: {
pie: {
innerSize: 130,
depth: 45
}
},
series: [{
name: 'Delivered amount',
data: [
['31%', 31],
['25%', 25],
['22%', 22],
['15%', 15],
['7%', 7]
]
}]
});
});
You can use two same series. Something like this:
series: [{
name: 'Delivered amount',
data: [
['31%', 31],
['25%', 25],
['22%', 22],
['15%', 15],
['7%', 7]
],
size: '60%',
dataLabels: {
formatter: function() {
return this.y
},
distance:10
}
},{
name: 'Delivered amount',
data: [
['3', 31],
['2', 25],
['2', 22],
['5', 15],
['7', 7]
],
size: '60%',
dataLabels: {
formatter: function() {
return this.point.name
},
color: 'white',
distance:-10
}
}]
DEMO