When I used this function to get features, I found that:
If the 'Style' (like image and text) of a 'Feature' is within 100 pixels of the feature's coordinate, I can get the feature by using the pixels within the 'Style';
But If the 'Style' is too far (more than 100 pixels), I cannot get the 'Feature' by using the pixels of the 'Style'.
e.g. adding the 'ol/style/Text' into a Style of a feature.
new Text({
font: '15px Microsoft YaHei',
text: '',
fill: new Fill({
color: '#222'
}),
backgroundStroke: new Stroke({
color: 'rgba(0,0,0,0.5)',
width: 1
}),
backgroundFill: new Fill({
color: 'rgba(0,250,154,0.3)'
}),
textAlign: 'middle',
textBaseline: 'middle',
offsetX: 200,
offsetY: 200
})
I have found solution in github:
By default, OpenLayers only considers an area of 100 pixels around a feature for hit detection. When you use an offset of 200 pixels. you are outside of that region. To fix it, configure your layer with a renderBuffer with an appropriate size.
Related
Note: I'm quite new to javascript and ChartJS, so I have done my best to look at similar questions but I'm unsure how to apply the solutions to my issue. I'm really quite confused by the plugins, and it seems whenever I try to literally copy and paste in solutions from other posted questions, it either breaks the graph or just doesn't do anything at all. So, with that in mind, I appreciate any help!
I'm trying to format the outer of two overlaid doughnut graphs using ChartJS so that the outer graph looks like a rounded bracket. The intention is to be able to group certain slices of the inner doughnut together, EG: Inner graph shows number of years John has lived in 5 different places, the outer graph is grouping the 2nd, 3rd, and 4th slice to indicate that he lived in these locations while he was a wildland forest firefighter for the US Forest Service.
See below. Please note, the tick marks on the edges are important. It should look like a rounded bracket -> ] <-
Things I have tried:
Doing borderWidth: { top: 1, right: 1, bottom: 0, left: 1 } breaks the graph, as I'm not sure there's a "bottom" persay to a doughnut graph
Trying to change borderColor breaks the graph in the same way
I'm not sure how to select just the cutout to do any custom styling, as I'm not well versed on HTML canvases and how they work.
Although I am currently attempting to remove one of the borders, I have also considered solutions like:
Adding an additional border to the inner doughnut chart and forcing it to clip over the innermost edge of the outer doughnut
adding a round, white background to the inner doughnut that clips over the innermost edge of the outer doughnut
Changing just the color of the innermost edge of the outer doughnut to transparent or white
Hiding the border entirely, letting the background color of the outer doughnut act like the spine of the rounded bracket I'm trying to create, then adding two new data segments to the outer doughnut at the beginning and end each with a different cutout percentage than the spine. (I hope that makes sense. Essentially the data would look like {1, 98, 1} with the cutout specified on each slice so it would look like cutout: {85, 90, 85}, in theory. This version is untested.)
Pardon the comments in the js, those are just there for me to remember what's going on.
var chart1 = document.getElementById('chart1').getContext('2d');
let doughnut1 = new Chart(chart1, {
type: 'doughnut',
data: {
datasets: [{ // OUTER ring
data: [100], //leave at 100
backgroundColor: ['#fff'],
circumference: 300, //determines circumference of outer border X out of 360
weight: 0.15,
radius: '100%',
borderColor: 'black',
borderWidth: 4
}, {
data: [14, 14, 22, 37, 13],
backgroundColor: ['#f5ce42', '#ccc3a3', '#fc95f2', '#cdb2ed', '#423225'],
radius: '95%',
borderColor: 'black',
borderAlign: 'inside'
}]
}
});
.wrap__chart {width: 50vw; margin: 0 auto;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<div class="wrap__chart">
<canvas id="chart1"></canvas>
</div>
Parameters for this graph are:
The graph has to be dynamic, cannot include any static images or the like as the data will be filled from a calculator
The graph must be responsive (Ignoring the fact that it largely isn't right now lol)
Can't use JQuery, unfortunately...
You can leave a single line instead of a rectangle by modifying the width property weight: 0.15 to weight: 0.001 and the border property borderWidth: 4 to borderWidth: 1. There is no other property you can change to make it more like what you want.
The new code:
var chart1 = document.getElementById('chart1').getContext('2d');
let doughnut1 = new Chart(chart1, {
type: 'doughnut',
data: {
datasets: [{ // OUTER ring
data: [100], //leave at 100
backgroundColor: ['#fff'],
circumference: 300, //determines circumference of outer border X out of 360
weight: 0.001,
radius: '100%',
borderColor: 'black',
borderWidth: 1
}, {
data: [14, 14, 22, 37, 13],
backgroundColor: ['#f5ce42', '#ccc3a3', '#fc95f2', '#cdb2ed', '#423225'],
radius: '95%',
borderColor: 'black',
borderAlign: 'inside'
}]
}
});
Ok I finally found a solution for my own question. It's quite roundabout, so I don't know if it's an actual answer for anyone else.
It involves using three graphs, unfortunately:
var sliceA = 60000,
sliceB = 24000,
sliceC = 36000;
var protected = (((sliceA + sliceB)/(sliceA + sliceC + sliceB)) * 360);
//colors
var outerRing = 'green';
var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [sliceA, sliceB, sliceC],
backgroundColor: ['limegreen', 'skyblue', 'firebrick'],
radius: '82%',
cutout: '50%',
}]
}
});
var chart2 = document.getElementById('chart2').getContext('2d');
let doughnut2 = new Chart(chart2, {
type: 'doughnut',
data: {
datasets: [{ // OUTER ring
data: [1, 98, 1], //leave at 100
backgroundColor: [outerRing, 'transparent', outerRing],
circumference: (protected + 5), //determines circumference of outer border X out of 360
weight: 0.5,
radius: '100%',
borderWidth: 0,
borderAlign: 'inside',
borderColor: 'transparent',
rotation: -2
},
{ data: //14, 14, 22, 37, 13
[100],
backgroundColor: [outerRing],
radius: '97%',
cutout: '92%',
circumference: (protected + 2),
borderWidth: '5px',
borderColor: outerRing,
rotation: -1
}
]
},
options: {
parsing: {
key: 'nested.value'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<div class="container">
<canvas id="chart" style="position:absolute;"></canvas>
<canvas id="chart2" style="position:absolute;"></canvas>
</div>
it's not perfect, i'm still working out how to make the back rotation and addition to the variable "protected" in the outer rings responsive, with the intention of making it so that the inside of each tick mark aligns perfectly with 0 degrees and var protected degrees on the circle, to properly indicate that the outer ring encompasses all slices of the doughnut chart within the specified range.
you can change the outer ring style from a capital i to a [ style by changing the radius of each of the two layers of the outer ring. Switching the second dataset to be 100% and the first to be ~95% will change it accordingly.
I'm using OpenLayers 6 and ol:ext FontSymbol & free FontAwesome for creating the marker.
I need to put number char into the center of the marker,
It's working fine for 0-9 char only but for more than 1 chars it's not working and showing only "1" like the glyph only accept 1 char.
This is my style :
var styles = new ol.style.Style({
image: new ol.style.FontSymbol({
glyph: number.toString(),
form: 'marker',
radius: 20,
fontSize: 0.2,
fontStyle: 'sans-serif',
rotation: 0,
rotateWithView: false,
color: 'white',
fill: new ol.style.Fill({
color: colorparam.toString(),
})
}),
});
Am I doing it wrong ? or is there any better way to do it ?
I tried to add original style - text after image but the char for all markers shown above all of the marker itself.
var styles = new ol.style.Style({
image: new ol.style.FontSymbol({
glyph: '',
form: 'marker',
radius: 20,
fontSize: 0.2,
fontStyle: 'sans-serif',
rotation: 0,
rotateWithView: false,
color: 'white',
fill: new ol.style.Fill({
color: colorparam.toString(),
})
}),
text: new ol.style.Text({
text: number.toString(),
scale: 1.2,
fill: new ol.style.Fill({
color: "#fff"
}),
}),
});
I choose to use font instead render image / icon file since I think font source will be loaded once and lighter than image.
ol-ext FontSymbol is designed to display font icon and only draw the first char of he string your are giving to it... The symbol itself is displayed as an image and thus is drawn under ol text style.
You can ask for a new feature at ol-ext (https://github.com/Viglino/ol-ext/issues) to display full text string instead of char in the symbol.
In my image below you see two lines, both green, at the top.
The higher green line has a flag (that is what you see to the left).
The lower green line, is usually red.
After playing around for hours to determine what is making the lower line green, I discovered only changing lineColor on the flag of the higher green line above it, did this series change from red to green.
In the navigator below, you can see the bottom line is actually red. Underneath it, is a long green block - I don't understand where this is from.
Here is an example of changing the lineColor of the flag, and the line below changes.. you'll notice what looks like the big green mask in the navigator is still there.
Lastly, this is the same chart on another page - no problems at all, the red line is red.
The top line's flag looks like:
{
allowOverlapX: true,
showInLegend: false,
enableMouseTracking: false,
type: 'flags',
name: `${id}-flags`,
onSeries: id,
data: [{ title: 'Flag text', x: Date }],
shape: 'flag',
fillColor: 'green',
style: {
fontSize: 10,
fontWeight: 500,
color: '#FFFFFF',
paddingBottom: 2
},
yAxis: 0,
lineColor: flagColor[classification], //Responsible for overriding the line from red to green.
lineWidth: 1,
height: 12,
y: -45,
}
The higher and lower lines look something like this:
type: 'line',
startX,
endX,
id,
enableMouseTracking: true,
name: id,
showInLegend: false,
showInNavigator: true,
color: stroke,
lineWidth: strokeWidth,
marker: { enabled: false },
yAxis: 0,
data: [[startX, pPrice], [endX, price]],
I should also note that sometimes this doesn't happen, I just can't figure out what would cause this.
Has anyone run into something like this before?
So I was able to fix this, and if anyone ever stumbles upon it - here is the solution.
I'm not sure sure why this only happens sometimes, but it seems like lineColor should also be defined on the line series itself (as opposed to only color).
I am using Joint Js for my custom drawing tool.
And I have some problems with drawing the element on the picture below, i think it should be the Circle element with custom border, but i don't know how to do border like this.
Does anyone have any ideas how to solve this problem?
Needed Element
It is quite easy.
You just need a shape of type: basic.Image
I created and the base64 picture that you need.
Just paste this code to your Stencil and you are done.
new joint.shapes.basic.Image({
attrs: {
image: { width: 50, height: 50, 'xlink:href': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB0VBMVEUAAADVACvYACfYACfYACfYACfYACfYACfVACrYACfYACfYACfYACfYACfYACfYACfZACbbACTYACfYACfZACbYACfVACvYACf/AADZACbWACnYACfVACvXACjYACfZACbXACjYACfYACfYACfYACfYACfYACfZACbXACjYACfYACfWACnZACbYACfMADPYACfbACTXACjaACbYACfaACXcACPZACbYACfYACfYACfYACfYACfWACnYACfZACbVACvXACjYACfXACjXACjXACjXACjYACfYACfWACnbACTXACjYACfYACfZACbYACfYACfYACfZACa/AEDXACjYACffACDXACjZACbXACjZACbYACfXACjYACfZACbYACfXACjYACfbACTYACfYACfbACTYACfZACbZACbYACfYACf/AADYACfbACTXACjZACbZACbZACbYACfjABzYACfYACfZACbYACffACDYACfZACbVACvYACfXACjaACXYACfbACTYACfYACfXACjXACj/AADZACbYACfaACXXACjYACfYACfZACbYACfTACzYACfYACfXACjXACjYACfYACfYACfYACfYACfYACfYACfYACcAAABaMEySAAAAmXRSTlMABqiXIbD7oytU7e7s6+rp6BX+rzVjGIQCZRm4EmbeL2ca9lu8iWkbP/p7HzbKCs8cbUTvNx0o373wJ/FF/UkeTMt0elOutcMlKhP8m59c+JiZBEbzCHOttIxibKU9vibWDvfFI6w8k57jAecxM35/cuUJ5nfbDRB8hQz5OT5vB+HMzmAD1MkpTXXiZKoX2c2BOjuC9C6Q8tGPRJElAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+IFBxY1HGz05tsAAAM6SURBVFjDpZd7WxJBFMaPmjdE0K3I0ii1EMTQ8JLiLdOyJLVIMM1MMzPtZhJmaiF5T0sLRefbtoJnZheWZfbp/DXnPef3srMzzO4CcEcaf6typGec+T+DTJKVnaNcytXl5el0Or0+P99gMBoLCgqVDQgRzp5TdDgvEFmYkhmIFheKlIoX5Q6XkhsQUlyiVL0scBsQ8xWl8lWpQ6mqASkrV6pf4zcg5Hpi2SKdQkUqA2KJr1ptKQ0qpZO0WeVFu4GkNICqG5IWg11aclTL90GNogEU3cxiPdUOSSWbcBkAOGtZUzaT65haEJ1ofTIDaLjFeuuo2ki1JpdFUDWAhmba3IhaC5Va28T1FB3akxvA7Vba3nIqdVDlTnRHCKoG0EnbO2JCFxXuxgSLYFczgHsU6Irm3Zhm3T/tsKheATygk+g+SXvcmD4EzuhFwt0jZn2Y9dfzGrT3I9MnZumYPOLlAR4jkw7goXvrCb9BGzK1HrDieEDDue8tQ8oKPhwO8vMAT5HywRAOh7UYPENqCEZw+FyLgROpERjF4QstBjlIjcIYDse1GJQgNQa4ii+18AC4lWoBF6RJmwGeCmVgxovxauEdSJlhAod2LQavkJqASRxWaTF4jdQkTMkPB84oR2qKHVAZWgzeINXJDrRpDfzMW3bd4zYcv+M3eI+MTdx+dC9/4Df4yHYywCwmn+Z4eYcfmVkxc2ESeyrwxGeKuE7SAGb583z8lzwkAtF8gWi8C18psBDNF+nLxdIyD/+NrpthMaZ8p44FNan5dvYy8/1UCq5QKZRyJeZ+0OaVIIqrVCODQXU+OMh6V6m6ts7UjVI1vnSDda6vMX2TvXYQv8qdXPazvuZNaWVL8g64tJ1kGt7tJdYlbMmLlUQSP4fXEnHPzrS0pzK+viutkrHhX/Kyaee3rGE34Qcce7IGInTs/zFFvy2KTH/3Q3FfJHuOxEuczyQJ4faHQn53op6p+K+ZCQuEK4TwTJJVyj3g4Q9yk6/zoTk1bz5U22len14d1/tSPcHGwwPJ8YEwzzO8MHKkjB9FCjnwk0hzRgLxdCDi1Pb17fL1Fh8bxYUVjMfFvT6XJpiFp6LCo97xD9G9KT8fiyixAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTA1LTA3VDIyOjUzOjI4KzAyOjAwwNjrNgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wNS0wN1QyMjo1MzoyOCswMjowMLGFU4oAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC' },
text: { text: 'Circle Shape', fill: '#000000', 'font-size': 12, stroke: '#000000', 'stroke-width': 1}
}
})
How to set size of shapes in vis js which can have label inside?
e.g.
Code1:
shape: 'circle',
color: {
border: 'black',
background: 'white'
},
borderWidth: 1,
borderWidthSelected: 2,
in above Code1, if there is nothing in label to put in shape circle, then how i can increase/decrease the size of same. If shape is anything for which label is put outside we can increase and decrease the size of icons. e.g.
Code2:
shape: 'icon',
icon: {
face: 'FontAwesome',
code: '\uf1db',
size: 100,
color: '#000000'
}
As in above Code2 for icon 'size' option is available.Is there any way to use 'size' option in Code1?
The documentation states
"...The size is used to determine the size of node shapes that do not
have the label inside of them. These shapes are: image, circularImage,
diamond, dot, star, triangle, triangleDown, square and icon..."
So the answer is no. (Details can be found here https://visjs.github.io/vis-network/docs/network/nodes.html)
But as an workaround you could do something like this:
shape: 'circle',
scaling: {
label: {
enabled: true,
min: 50,
max: 50
}
},
value: 1
Where as with the scaling.label.min and scaling.label.max property, you could, change the size of the node. (but you will need a value, for the node) I hope this helps.