Related
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)
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 have an eChart grid layout with 4 stacked bar charts and cannot figure out how to assign datazoom (nor have I found any examples of this online).
When I place the datazoom before the series, I DO get a zoom controller but only on one of the charts...
dataZoom: [{type: 'inside', start: 50, end: 100},
{start: 50, end: 100 }
}],
series: [{type: 'scatter'...
I won't post code for now (it's large) in hopes that someone can just tell me where to put the datazoom node.
I have no idea why you charts not working. Without example and with complex data you need to call fortune-teller only. In general datazoom can be easily attached to series.
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: [{
type: 'category',
gridIndex: 0
},
{
type: 'category',
gridIndex: 1
}
],
yAxis: [{
gridIndex: 0
},
{
gridIndex: 1
}
],
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
]
},
grid: [{
bottom: '55%'
},
{
top: '55%'
}
],
series: [{
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
encode: {
x: 'product',
y: '2012'
}
}, {
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
encode: {
x: 'product',
y: '2013'
}
}, {
type: 'bar',
stack: 'st1',
encode: {
x: 'product',
y: '2014'
}
}, {
type: 'bar',
stack: 'st1',
encode: {
x: 'product',
y: '2015'
}
}],
dataZoom: [{
type: 'slider',
show: true,
xAxisIndex: [0, 1],
start: 1,
end: 70
},
{
type: 'inside',
xAxisIndex: [0, 1],
start: 1,
end: 35
},
],
};
myChart.setOption(option);
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts#4.9.0/dist/echarts.min.js"></script>
I previously used the label formatter to customise the Y-Axis labels in a chart, but I'm not sure how to do this using highcharts-vue because of scope.
See the following pseudo code;
export default {
data () {
return {
currencySymbol: '$',
title: 'My Chart',
points: [10, 0, 8, 2, 6, 4, 5, 5],
chartType: 'Spline',
chartOptions: {
chart: {
type: 'spline'
},
title: {
text: 'Sin chart'
},
yAxis: {
gridLineDashStyle: 'Dot',
labels: {
style: {
color: '#fff'
},
formatter: function () {
return this.currencySymbol + this.axis.defaultLabelFormatter.call(this)
}
},
series: [{
data: [10, 0, 8, 2, 6, 4, 5, 5],
color: '#6fcd98'
}]
}
}
}
In the full app, the currencySymbol property is updated in the response of an AJAX call.
Is there an elegant way of achieving this?
The most recommended way would be to use Computed Properties, JS Arrow function, and call Highcharts.Axis.prototype.defaultLabelFormatter.
First of all we need to move a whole chart configuration inside of a computed property, e.g called chartOptions. Then we just need to refactor the formatter function a bit, so that it would be arrow function, and create the variable with symbol defined in component data (!important). After that, the this keyword will indicate on the component object, and refer the symbol direcly by calling the variable created on the top of the function. I prepared the example, so please take a lok on it.
Live example: https://codesandbox.io/s/highcharts-vue-demo-icuzw
Code:
data() {
return {
currencySymbol: "$",
title: "My Chart",
points: [10, 0, 8, 2, 6, 4, 5, 5],
chartType: "Spline"
};
},
computed: {
chartOptions() {
var symbol = this.currencySymbol;
return {
chart: {
type: "spline"
},
title: {
text: "Sin chart"
},
yAxis: {
gridLineDashStyle: "Dot",
labels: {
style: {
color: "#000"
},
formatter: label => {
return (
symbol + Highcharts.Axis.prototype.defaultLabelFormatter.call(label)
);
}
}
},
series: [
{
data: [10, 0, 8, 2, 6, 4, 5, 5],
color: "#6fcd98"
}
]
};
}
}
Kind regards!
I am now using Dojo to show a line chart. but I don't know how to change the series line color, would anyone help? thx.
var chart1 = new dc.Chart("test1");
chart1.addPlot("default", { type: "Default", lines: true, markers: true, tension: 1 });
chart1.addAxis("x", { majorTick: { stroke: "black", length: 5 }, minorTick: { stroke: "black", length: 1} });
chart1.addAxis("y", { vertical: true, majorTick: { stroke: "black", length: 5 }, minorTick: { stroke: "black", length: 1} });
chart1.addSeries("Series A", [{ x: 0.5, y: 5 }, { x: 1.5, y: 1.5 }, { x: 2, y: 9 }, { x: 5, y: 0.3}]);
chart1.addSeries("Series B", [{ x: 0.3, y: 8 }, { x: 4, y: 6, tooltip: "Custom tooltip" }, { x: 5.5, y: 2}]);
chart1.addSeries("Series C", [{ x: 0.8, y: 6 }, { x: 8, y: 1, tooltip: "Custom tooltip" }, { x: 7, y: 2}]);
chart1.addSeries("Series D", [{ x: 0.1,y: 5}, { x: 2, y: 3, tooltip: "Custom tooltip" }, { x: 4, y: 5}]);
var anim1a = new dc.action2d.Magnify(chart1, "default");
var anim1b = new dc.action2d.Tooltip(chart1, "default");
chart1.render();
for Series A, Series B，Series C，Series D，I want to use my-defined color to show them, anyone can help?
You can probably also provide the color in your series for it to be used by the plot. Something like the following:
chart1.addSeries("Series A",
[{ x: 0.5, y: 5 }, { x: 1.5, y: 1.5 }, { x: 2, y: 9 }, { x: 5, y: 0.3}],
{ stroke: "green" });
You can change the colors by using the setTheme() function while defining your chart.
Must look like :
require(["dojox/charting/Chart", "dojox/charting/themes/Shrooms", "dojox/charting/plot2d/Areas", ...],
function(Chart, Shrooms, Areas, ...){
new Chart(node)
addPlot("default", { type: Areas, tension: "X" })
setTheme(Shrooms)
addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4])
addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2])
addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2])
render();
});
In this example the Theme "Shrooms" will be loaded.
Here you can see, what themes are available for Charts:
http://demos.dojotoolkit.org/demos/chartTypes/demo.html
and in the dojo API you can find them under dojox/charting/themes.
Here's a good tutorial how you can define themes by yourself:
http://dojotoolkit.org/documentation/tutorials/1.9/charting/
Regards, Miriam