am look to answer this bug on Apache Echarts with vue 3 Composition API
am using apache echarts for rendering maps as a background, the maps is become from GeoJSON data of province accross my country : Source GeoJSON, the rendering process of GeoJson was successfuly as expected, but take a this code bellow, Here is problems occurs, am expected that after rendering the chart, the series that was defined is expect rendered also, but there is not yet, so whats am wrong? FYi : am need to rendr the chart and make tooltip of each province section of chart series (simplify Chloropeth Mapping), am following many guide but there is not works yet. am also referring of the official documentation of apache echart example her Chloropet Apacghe Echarts, but not working as expeccted. so is there can give me the suggestion of am wrong ? great thanks for all, looking best oppinions and suggestion from you here is my result that is not expected :
just rendered maps, not the defined series
and here is my expectation(same as example) : Expected the series is rendered in maps section and if am hovered my cursor the tooltip is show the data value of the given series;
Apache Echart COnfiguration in Vue (as reactive)
title: {
text: 'Peta Sebaran Arsiparis （2022）',
subtext: 'Open source data',
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2
},
geo: {
map: "indonesia-province",
roam: true,
nameProperty: "Propinsi",
tooltip: {
show: true
},
itemStyle: {
color: '#fff'
},
emphasis: {
itemStyle: {
color: undefined,
borderColor: 'green',
borderWidth: 2
},
label: {
show: false
}
},
select: {
itemStyle: {
color: 'green'
},
label: {
show: false,
textBorderColor: '#fff',
textBorderWidth: 2
}
},
regions: generateRegions(provinceNames)
},
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
series: [
{ // 地图配置
name: 'Province daatatasdbashdvjk',
type: 'map',
map: 'indonesia-province', // 自定义扩展图表类型
nameProperty: "Propinsi",
geoIndex: 0,
data: generateMapData(provinceNames)
}
],
}
Related
I'm using cytoscape.js and when I try to initialize it, I found the canvas height to 0. I don't understand why.
This is my js :
var cy = cytoscape({container: document.getElementById("mapping")});
cy.add([
{group: "nodes", data: {id: "n0"}, position: {x:0, y:0}},
{group: "nodes", data: {id: "n1"}, position: {x:100, y:50}},
{group: "edges", data: {id: "e0", source: "n0", target: "n1"}}
]);
console.log(cy.container());
Here is the jsfiddle where you can see the "height":0px in log and nothing in rendered.
If you initialize cytoscape with static data, consider doing it like the documentation shows:
var cy = cytoscape({
container: document.getElementById('cy'), // container to render in
elements: [ // list of graph elements to start with
{ // node a
data: { id: 'a' }
},
{ // node b
data: { id: 'b' }
},
{ // edge ab
data: { id: 'ab', source: 'a', target: 'b' }
}
],
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(id)'
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
layout: { /!!!
name: 'grid',
rows: 1
}
});
you dont specify a layout in your sample code, i rarely do it like that, i simply add the nodes/edges and call the layout algorithm i want, the rest of your code seems ok, did you include all scripts and css files for cytoscape?
I am trying to implement angular D3 Line Chart with angular-nvd3 library. We are using AngularJS 1.6 with ES6. This is how angular-nvd3 is wired:
app.js
import angularnvd3 from '../node_modules/angular-nvd3/index';
export default angular.module('myApp', othermodules,..angularnvd3)
.
.
controller.js
this.linechartOptions = {
chart: {
type: 'lineChart',
height: 300,
width:500,
x: function(d){ return d.x },
y: function(d){ return d.y },
useInteractiveGuideline: true,
xAxis: {
axisLabel: 'X Label'
},
yAxis: {
axisLabel: 'Y Label',
},
},
title: {
enable: true,
text: 'Some text',
css: {
'font-size' : '15px',
'font-weight' : 'bold',
'text-align' : 'left'
}
},
};
this.linechartData = [{
values: lineChartData,
key: 'Some Key',
color: '#1f77b4'
}]
template.html
<nvd3 options="controller.linechartOptions" data="controller.linechartData"></nvd3>
However, the graphs get painted with a black background.
I have been referring to these resources:
http://krispo.github.io/angular-nvd3/#/quickstart
http://plnkr.co/edit/lBKFld?p=preview
However I can't figure out how to remove the black background and the lines that create the filled area. I simply need to view the line graph as shown in the plunker mentioned above.
Simply include nv.d3.css from node_modules/nvd3/build/nv.d3.css and it will fix this issue.
$('#container').highcharts('Map', {
title : {
text : 'Highmaps basic demo'
},
subtitle : {
text : 'Source map: Africa'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series : [{
data : data,
mapData: Highcharts.maps['custom/africa'],
joinBy: 'hc-key',
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
http://jsfiddle.net/gh/get/jquery/1.11.0/highslide-software/highcharts.com/tree/master/samples/mapdata/custom/africa
I am using this fiddle and I want to get the country name on click event on the country. Anybody can help me with the example or link to the API of this? I read the API but could not find, I guess I am missing some point.
thanks in advance
Pretty simple, just add this:
plotOptions:{
series:{
point:{
events:{
click: function(){
alert(this.name);
}
}
}
}
}
The this in the point scope represents the clicked point, therfore you have access to it's properties.
http://jsfiddle.net/farz5vq2/
i made a chart, with highstock, that contains the enabled scrollbar but when i focus the mouse on it, it happens a strange behavoir: the chart goes down and covers the scrollbar.
the options that i used are:
var options = {
chart: {
title: {
text: ''
},
renderTo: 'containerGrafico'
},
yAxis: {
title: '',
tickPixelInterval: 30,
labels: {
formatter: function () {
return '€ ' + Highcharts.numberFormat(this.value, 0);
}
}
},
xAxis: {
categories: seriesMesi,
labels: {
formatter: function () {
return arrayMesi[this.value.substring(4, 6)] + " " + this.value.substring(0, 4);
}
},
max: 6
},
scrollbar: {
enabled: true,
barBackgroundColor: 'transparent',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'transparent',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
},
series: [
{
name: 'Totale Versato',
color: '#96B7D8',
type: 'column'
},
{
name: 'Prelievi',
color: '#D1D1D1',
type: 'column'
}]
};
anybody can tell me where i'm wrong?
thank you very much
Cinzia
In general, categorized axis for Highstock isn't supported.
Anyway, for me it works properly, see: http://jsfiddle.net/3bQne/1004/
Try to update to latest (1.3.10) version and remove categories. Or use Highcharts with categorized axis.
If none of above will help - recreate issue on jsFiddle.
I have a Highcharts pie chart here: http://jsfiddle.net/6PbbR/52/
$(function () {
var chart;
$(document).ready(function() {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color]
]
};
});
// Build the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
shadow: true,
},
tooltip: {
enabled: false
},
title: {
text: ""
},
plotOptions: {
pie: {
allowPointSelect: true,
size:'68%',
cursor: 'pointer',
shadow: true,
dataLabels: {
enabled: true,
distance: -40,
style: {
width: '100px'
},
color: '#fff',
connectorColor: '#000000',
formatter: function() {
return '<b style="font-family:arial;font-size:10px;font-weight:bold">'+ this.point.name +'</b> ';
}
}
}
},
series: [{
type: 'pie',
name: 'Income Investments',
data: [
['FLOATING RATE FUNDS', 16.667],
{
name: 'Corporate Capital Trust',
y: 16.667,
sliced: true,
selected: true
},
['BONDS', 16.667],
['ANNUITIES', 16.667],
['REITs', 16.667],
['CDs', 16.667]
]
}],
colors: [
'#83a3c6',
'#98012e',
'#19699b',
'#ae9e8e',
'#5283b0',
'#958370'
],
});
});
});
Two questions:
1) I'm not happy with how I inserted inline style in plotOptions{pie{formatter. Where is a better place to do this using the API, instead of brute-forcing inline style?
2) I would like to change the font-family for the red wedge (and possibly tweak fix its positioning/margins). What's the best way of doing this?
Edit: Ideally, I can accomplish my needs without needing to go outside the above function. Is it possible to attach style to just one data point using the API?
It's a simple html, so you can add a class or id and then style using css.
js
formatter: function() {
return '<b id="myTooltipId">'+ this.point.name +'</b> ';
}
css
#myTooltipId {
font-family: arial;
font-size: 10px;
font-weight:bold
}
Update:
Inside formatter you can get the slice properties using this.
So you just have to check if the slice is the one you want.
formatter: function() {
// key is the slice name
if (this.key == 'CDs') {
return '<b id="myTooltipId">'+ this.point.name +'</b> ';
} else {
return this.value;
}
}