I don't know how to convert the unit of the cirle radius, now it's meters but I need to convert it into pixel.
I also want to know how to make the border of the circle become dashed border, like the picture (the circle with the white dashed border)
Here is the code.
const map_data = [];
const current_map_data = [];
this.current_map = this.$echarts.init(document.getElementById('map_id'));
this.$echarts.registerMap('my_map', map_data);
const typhoon_points = [
{name: 0, value: [124.36, 23, 6]},
{name: 1, value: [122, 23.8, 6]},
{name: 2, value: [120, 24.4, 6]},
{name: 3, value: [118.5, 24.8, 6]},
{name: 4, value: [117.2, 25.5, 6]}
];
const typhoon_lines = [
{"point": [0, 1], "coords": [[124.36,23], [122, 23.8]]},
{"point": [1, 2], "coords": [[122, 23.8], [120, 24.4]]},
{"point": [2, 3], "coords": [[120, 24.4], [118.5, 24.8]]},
{"point": [3, 4], "coords": [[118.5, 24.8], [117.2,25.5]]},
];
const option = {
geo: [{
map: map_name,
roam: 'move',
boundingCoords:[ [118, 26.5], [122.4,21.5] ],
center: center,
layoutCenter: ['50%', '50%'],
aspectScale: 1,
scaleLimit: { min: 1.6, max: 12.0 },
left: '0%',
zoom: zoom,
itemStyle: {
areaColor: 'none',
borderColor : '#999',
borderWidth: 1,
emphasis: {
areaColor: 'inherit',
},
},
}],
series: [{
selectedMode: false,
name: 'current_map',
type: 'map',
geoIndex: 0,
data: current_map_data,
zlevel: 3
}, {
name: "",
type: "lines",
zlevel: 6,
lineStyle: {
type: 'solid',
width: 1,
opacity: 1,
curveness: 0,
orient: 'horizontal',
color: "#000",
},
data: typhoon_lines,
}, {
name: '',
type: 'scatter',
coordinateSystem: 'geo',
color: ['#000'],
itemStyle: {
borderType: 'dashed', // it's not working
borderWidth: 50, // The unit of the symbol size is pixel, I need to convert it into pixel.
borderColor: 'green',
color: '#000',
},
data: typhoon_points,
}],
};
I created a line & circle layer into series, but I don't know how to change the border style and the unit of the symbol size (I think it's the radius of the circle)
Related
I am trying to use echarts bar https://echarts.apache.org/examples/en/editor.html?c=bar-label-rotation&lang=ts for displaying data . The problem I have is when trying to add four different bars to a chart I get error: [ECharts] Unkown series undefined. It works fine when there is only one bar. Here is my code:
this.chartOptions = {
grid: {
top: 20,
bottom: 90,
right: 5,
left: 60
},
legend: {
data: [
'Positive Capacity'
'Negative Capacity'
'Positive Energy'
'Negative Energy'
]
},
tooltip: {
trigger: 'axis',
formatter: (val) => `
<div>${format.formatTime('dd.MM.yyyy hh:mm', val[0].data[0])}</div>
<div>${val[0].marker}<span style="float:right"> ${val[0].data[1]} kW</span></div>
`
},
xAxis: {
type: 'time',
name: this.chartTranslations.xAxis,
nameLocation: 'middle',
nameGap: 80,
axisLabel: {
rotate: 45,
formatter: (val) => format.formatTime('dd.MM.yy hh:mm', val)
}
},
yAxis: {
type: 'value',
name: this.chartTranslations.yAxis,
nameLocation: 'middle',
nameGap: 50,
scale: true,
boundaryGap: ['2%', '2%'],
axisLabel : {
formatter: (val) => this.isMegaWatts ? (val/1000 + ' MW') : (val + ' kW')
},
},
series: [
{
name: 'Positive Capacity'
type: 'bar',
barGap: 10,
emphasis: {
focus: 'series'
},
itemStyle: {
color: new graphic.LinearGradient(0, 0, 0, 2.5, [
{
offset: 0,
color: 'rgba(45, 159, 195, 1)'
},
{
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}
])
},
data: this.positiveCapacity
},
{
name: 'Negative Capacity',
type: 'bar',
barGap: 10,
emphasis: {
focus: 'series'
},
itemStyle: {
color: new graphic.LinearGradient(5, 5, 0, 2.5, [
{
offset: 0,
color: 'rgba(45, 159, 195, 1)'
},
{
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}
])
},
data: this.negativeCapacity
},
{
name: 'Positive Energy',
type: 'bar',
barGap: 10,
emphasis: {
focus: 'series'
},
itemStyle: {
color: new graphic.LinearGradient(10, 10, 0, 2.5, [
{
offset: 0,
color: 'rgba(45, 159, 195, 1)'
},
{
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}
])
},
data: this.positiveEnergy
},
{
name: 'Positive Capacity',
type: 'bar',
barGap: 10,
emphasis: {
focus: 'series'
},
itemStyle: {
color: new graphic.LinearGradient(20, 20, 0, 2.5, [
{
offset: 0,
color: 'rgba(45, 159, 195, 1)'
},
{
offset: 1,
color: 'rgba(255, 255, 255, 0)'
}
])
},
data: this.negativeEnergy
}
]
};
Then later setting content with: Echarts.setOption(this.chartOptions);
Thanks for any help or insight.
Is there anywhere to make linear gradient on full date/year
https://jsfiddle.net/0712nw3g/64/
for example if i move/scroll the graph in 3 month zoom, color gradient should be the same as 1year/all
series: [{
type: 'line',
name: 'Volume',
id: 'stock',
data: volume,
yAxis: 0,
dataGrouping: {
units: groupingUnits
},
lineWidth: 10,
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, '#26A69A'],
[1, '#CE1510']
]
},
}
]
You can set the options xAxis.events.afterSetExtremes to modify the color gradient in the graph but the color in the navigator also changes.
https://jsfiddle.net/BlackLabel/j3ca7oyh/
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
Highcharts.stockChart('container', {
xAxis: {
events: {
afterSetExtremes: function() {
const dataRange = this.dataMax - this.dataMin,
currentRange = this.max - this.min
this.series[0].update({
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[1 - currentRange / dataRange, 'blue'],
[1, 'yellow']
]
},
})
}
}
},
series: [{
name: 'AAPL',
data: data,
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'blue'],
[1, 'yellow']
]
},
}]
});
});
Another way will be adding a series inside the navigator and trying to calculate gradient color.
https://jsfiddle.net/BlackLabel/qLp61uft/
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
Highcharts.stockChart('container', {
xAxis: {
events: {
afterSetExtremes: function() {
const dataRange = this.dataMax - this.dataMin,
currentRange = this.max - this.min
this.series[0].update({
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'red'],
[1, 'yellow']
]
},
})
}
}
},
navigator: {
series: {
name: 'AAPL',
data: data,
fillColor: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'blue'],
[1, 'yellow']
]
},
}
},
series: [{
name: 'AAPL',
data: data,
color: {
linearGradient: [0, 0, this.plotWidth, 0],
stops: [
[0, 'blue'],
[1, 'yellow']
]
},
}]
});
});
Need help with chart js
ACTUALLY, I'M USING VUE-CHARTJS BUT IT'S JUST A WRAPPER
in the line chart on the left side, the number is increasing by 5(0, 5, 10, 15, etc) I want it to increase by 10 and also decrease the height of the chart so the aspect ratio is something like 16/9
also is it possible to make the left number say 5k+, 10k+, 15k+ instead of just 5, 10, 15
here's my code for the chart
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
data: () => ({
chartdata: {
labels: ['January', 'February', 'March', 'April', 'May','Jun'],
datasets: [
{
data: [12, 20, 27, 22, 14, 10],
borderColor: "#135193",
pointBackgroundColor: "#135193",
pointBorderColor: "#135193",
backgroundColor: 'rgba(255, 255, 255, 0)'
},
{
data: [3, 12, 17, 20, 30, 40],
borderColor: "#FF8811",
pointBackgroundColor: "#FF8811",
pointBorderColor: "#FF8811",
backgroundColor: 'rgba(255, 255, 255, 0)'
}
]
},
options: {
responsive: true,
legend: {
display: false
}
}
}),
mounted () {
this.renderChart(this.chartdata, this.options)
}
}
</script>
Yes, you can just use CSS to set the dimensions of the canvas and set maintainAspectRatio to false in the options, for the ticks you can use the tick callback:
const labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
const options = {
type: 'line',
data: {
labels,
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'red',
backgroundColor: 'pink'
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
callback: (val) => (`${val}K`)
}
}]
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
max-height: 180px;
max-width: 320px;
}
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
Okay it turns out its as simple as wrapping the chart with a container and set height of that container as needed
I'm plotting a HighCharts heatmap of a wafer with around 50~70k points (it's like a CPU/processor silicon wafer). I need to put horizontal and vertical gridlines visible on the map, so that our engineers can easily figure out what's going on with the actual unit.
I have two concerns:
Horizontal gridlines are already OK, but the vertical gridlines are not drawn or visible. I thought, I just need to set gridZIndex=4. Kindly see image below - it should be drawn based on xAxis.tickPositions values (similar to yAxis)
I put some color options I found, but none of them could change the grid's color.
So far this is my code:
var option = {
chart: {
type: 'heatmap',
zoomType: 'xy',
},
boost: {
useGPUTranslations: true
},
title: {
text: chrt_title,
align: 'left',
x: 0,
style: {
fontSize: '12px',
}
},
exporting: {
buttons: {
contextButton: {
menuItems: [
'viewFullscreen', 'downloadPNG', 'downloadXLS'
]
}
},
enable: true,
},
xAxis: {
title: {
text: null
},
labels: {
enabled: false,
},
tickPositions: [1, 19, 43, 67, 91, 115, 139, 163, 183],
gridZIndex: 4, // DOESN'T WORK
gridLineDashStyle: 'Dash',
gridLineWidth: 1, // DOESN'T WORK
lineColor: 'red',
minorTickColor: 'red',
tickColor: 'red'
},
yAxis: {
title: {
text: null
},
reversed: true,
labels: {
enabled: false,
},
tickPositions: [1, 82, 116, 174, 272, 370, 428, 462, 544]
gridZIndex: 4, // ONLY PUT THIS AND WORKS ALREADY
gridLineDashStyle: 'Dash', // THIS WORKS TOO (Dot,Solid,etc)
lineColor: 'red',
minorTickColor: 'red',
tickColor: 'red'
},
colorAxis: {
stops: colrstops,
min: minval,
max: maxval,
startOnTick: true,
endOnTick: true,
labels: {
format: '{value}',
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
},
series: [{
boostThreshold: 100,
borderWidth: 0,
nullColor: '#ffffff',
tooltip: {
headerFormat: chrt_title + '<br/>',
pointFormat: 'RB{point.y} SL{point.x} <b>{point.value}</b>'
},
turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release
data: data
}]
}
As you can see, both xAxis and yAxis have gridZIndex = 4, gridLineDashStyle = 'Dash', but only the yAxis that gives the horizontal gridlines, no luck for xAxis (assuming this is where need to set the vertical gridlines) :(
the only similar question i found reg vertical gridlines is this one:
Highcharts: xAxis with vertical gridlines
but I tried to put the gridLineWidth=1, still nothin's happening T-T please help. thanks very much.
Update:
I temporarily replaced my option{} based on #ppotaczek sample but vertical gridlines still did not appeared.
Then I played with my own option{}, tried to add min and max in xAxis, and tried to temporarily removed my dynamic data and use #ppotaczek sample, the layout remains the same (no vertical gridlines)..
Also thought it has something to do with the version i'm using..? it's 9.0.1 - so I tried to update to latest 9.1.1, but also have same result.
var option = {
chart: {
type: 'heatmap',
},
xAxis: {
tickPositions: [1, 19, 43, 67, 91, 115, 139, 163, 183],
min: 1,
max: 183,
gridZIndex: 4, // DOESN'T WORK
gridLineDashStyle: 'Dash',
gridLineWidth: 1, // DOESN'T WORK
lineColor: 'red',
minorTickColor: 'red',
tickColor: 'red'
},
yAxis: {
title: {
text: null
},
reversed: true,
labels: {
enabled: false,
},
tickPositions: [1, 82, 116, 174, 272, 370, 428, 462, 544],
gridLineDashStyle: 'Dash', // THIS WORKS TOO (Dot,Solid,etc)
lineColor: 'red',
minorTickColor: 'red',
tickColor: 'red',
},
colorAxis: {},
series: [{
data: [
[10, 0, 1],
[20, 1, 5],
[30, 1, 5],
],
}]
}
I'm trying to place point over boxplot, however my attempt results in the point placed next to the boxplot:
data: [
{
x: [1, 2, 3, 4, 4, 4, 8, 9, 10],
type: "box",
name: "Set 1"
},
{
x: [5],
name: 'My special marker',
text: 'Some really interesting hover info',
marker: {
size: 5
}
},
],
layout: {
title: 'Revenues',
font:{
size:10
},
margin: {
l: 0,
r: 0,
b: 15,
t: 25,
pad: 0
},
height: 90,
dragmode: "pan"
},
Is it possible to place that point over boxplot using vue-plotly library?
Here I recreted the issue:
https://codesandbox.io/s/vue-plotly-delsw?file=/src/App.vue
EDIT:
For the desired result I need that addiotional point to be on top of the chart like this:
One solution is to set the size of the point's marker and the width of the bar such that they overlap each other. For example:
data: [
{
x: [1, 2, 3, 4, 4, 4, 8, 9, 10],
type: "box",
name: "Set 1",
width: 30,
},
{
x: [5],
name: "My special marker",
text: "Some really interesting hover info",
marker: {
size: 30
}
}
],