I need to add an image in highchart and then need to rotate it on different angles.
Here is the example: http://jsfiddle.net/peZfm/
And the rotation code:
chart.renderer
.image('http://graphs2.stormgeo.com/Images/Arrows/layout%202/0/test.png', 100, 100, 30, 30)
.css({
'-webkit-transform': 'rotate( 50deg)',
"-webkit-transform-origin": "center center",
'transform': 'rotate(50deg)',
"transform-origin": "center center",
'-ms-transform': 'rotate(50deg)',
"-ms-transform-origin": "center center",
})
.add();
The problem is, image rotation is working on Chrome, Mozilla but not working on IE10.
Is there a way to fix it?
You can use attr() and rotation paramter: http://jsfiddle.net/peZfm/3/
chart.renderer.image('http://graphs2.stormgeo.com/Images/Arrows/layout%202/0/test.png', 100, 100, 30, 30) .attr({
rotation:40
})
.add();
Related
Im just trying to let my user take a screenshot using the toDataUrl() function.
but, without a background rectangle, all pixel are transparent , and appear black .
so the solution is to dynamicly add a rectangle, generate the image, destroy the rectangle
saveImage(){
const stage=this.$parent.$refs.stage.getStage()
var stageRect = new Konva.Rect({
x:0,
y:0,
width: stage.attrs.width,
height: stage.attrs.height,
fill: 'green',
})
console.log(stage)
const backg=new Konva.Layer();
backg.add(stageRect)
stage.add(backg)
backg.setZIndex(0)
const dataURL = stage.toDataURL({ pixelRatio: 1, mimeType:"image/png" });
backg.destroy();
this.downloadURI(dataURL, 'stage.png');
},
it works (rectangle is created before all other layer) but... i can't get the size of the stage, i mean, the viewport because the user can zoom/dezoom the stage ....
any idea ?
Just use a scale to calculate background properties:
var stageRect = new Konva.Rect({({
x: -stage.x()/ stage.scaleX(),
y: -stage.y()/ stage.scaleY(),
width: stage.width() / stage.scaleX(),
height: stage.height() / stage.scaleY(),
fill: 'green',
});
Demo: https://jsbin.com/lehasitaje/2/edit?html,js,output
I'm drawing a closed line over a busy image as a background. It's working fine.
But my goal is to highlight the stroke as much as possible. Therefore, I'm looking for a way to make the line's stroke color 'negative/inverted' pixel of what's underneath that line.
For example:
<Line ... stroke="inverted" />
Possible? Achievable in some other way?
You may be able to use the globalCompositionOperation.
Mozilla docs here
Konva example here - see the parameters for the Konva.Rect() call. The example is for text, so not exactly as you require but hopefully you can adapt for the line requirement.
I tried to create a snippet to illustrate this but could not get exactly what you require. However, you can see how to apply the globalCompositionOperation parameter for a Konva line. Change the value of the comp variable to the other composition mode names from the Mozilla page to see their effects. The line is draggable.
An alternative may be to get the canvas pixel data, work out the pixels under the line and invert them individually.
// This is the color-composition mode
var comp = 'exclusion'
var stage = new Konva.Stage({
container: 'container',
width: 500,
height: 230
});
var layer = new Konva.Layer();
stage.add(layer)
var rect = new Konva.Rect({ x: 10, y: 0, width:500, height: 230,
fillLinearGradientStartPoint: { x: -50, y: -50 },
fillLinearGradientEndPoint: { x: 250, y: 150 },
fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
})
layer.add(rect)
var ln = new Konva.Line({
points: [25, 70, 300, 20],
stroke: 'red',
strokeWidth: 15,
lineCap: 'round',
lineJoin: 'round',
draggable: true,
globalCompositeOperation: comp
});
layer.add(ln);
layer.draw()
stage.draw()
#container {
width: 500px;
height: 230px;
background-color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/3.2.5/konva.js"></script>
<div id="container"></div>
I have a project using Highcharts 5 . I'm trying to get the chart labels on opposite sides of the donut graph, aligned straight left and straight right on each side, with the connectors spanning the distance appropriately.
Attached is the comp of what it should look like. Any thoughts on how to achieve this?
Thanks!
You can create the legend manually (html label and connector line with dot) using renderer:
var points = this.series[0].points,
renderer = this.renderer;
points.forEach(function(point) {
var labelOptions = point.options.label;
if (labelOptions) {
// text
renderer.text(labelOptions.text, labelOptions.x, labelOptions.y - 30, true).add();
// connector
var path = ['M', labelOptions.x, labelOptions.y].concat(labelOptions.connector.path);
renderer.path(path).attr({
stroke: 'gray',
'stroke-width': 1,
}).add();
// dot
renderer.circle(labelOptions.x, labelOptions.y, 3).attr({
fill: 'gray',
'stroke-width': 1,
}).add();
}
});
Options:
{
name: 'Microsoft Internet Explorer',
y: 56.33,
label: {
x: 400,
y: 100,
connector: {
path: ['l', -50, 0, 'l', 0, 100]
},
text: "<div class='label'><img src='https://wordpress.highcharts.com/blog/wp-content/uploads/2017/08/28160952/highcharts_logo.png' width='30' height='30'></img><div>Label text in HTML</div></div>"
}
}
Live working example (one label created): http://jsfiddle.net/kkulig/wdtpyof1/
This demo is only a good starting point. You should create your own mechanisms responsible for positioning labels.
API reference: http://api.highcharts.com/class-reference/Highcharts.SVGRenderer
This is solution for your issue
you can customize the connectors and get the chart labels on opposite sides of the donut graph.
http://jsfiddle.net/nmtri1101/ogfbxfqd/2/
Code jsfiddle :)
i'm using Highcharts to create a pie, and I need to put user's profile image in a circle in the middle of it. I have managed to add the image but couldn't get it to be round, and I managed to add a circle but without image background :/
what it the best way to combine the tow?
by the way it must be part of the svg and not an absolute div on top of the pie, because the tooltip needs to be on top of that image with opacity
to add a circle I used this code :
var pixelX = 438;
var pixelY = 276;
var pixelR = 70;
// add my circle
chart.renderer.circle(pixelX, pixelY, pixelR)
.attr({
zIndex: 100,
align: 'center',
// fill: 'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)',
color: 'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)',
stroke: 'black',
'stroke-width': 2
})
.css({
backgroundImage :'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)'
})
.add();
});
this example shows how to do it with pure SVG : http://jsfiddle.net/9zkfodwp/1/
resolved it by defining a pattern with the img, works fine but now need to find a way for the pattern to be no-repeat.
code used to add pattern:
function(chart) { // on complete
var r = chart.renderer,
pattern = r.createElement('pattern')
.attr({
id: 'pattern',
patternUnits: 'userSpaceOnUse',
x: 0,
y: 0,
width: 180,
height: 190,
viewBox: '0 0 135 135'
})
.add(r.defs);
r.rect(0, 0, 135, 135, 0)
.attr('fill', '#ddd')
.add(pattern);
r.image(profileImg,0,0,135,135)
.add(pattern);
});
and when I add the circle it can have a fill of the pattern:
// add my circle
this.circle = chart.renderer.circle(pixelX, pixelY, pixelR).attr({
fill: 'url(#pattern)'
});
this.circle.add();
I want to use chart.renderer.image to put a image on Yaxis. Please see this fiddle
Is there a easy way to put the image on Yaxis? For example I want to put the image on Yaxis [0,100]. It is very difficult to using the following way to do that.
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 0, 10, 30, 30)
.add();
In this line:
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 20, 50, 30, 30)
.add();
first two parameters are responsible for position (x,y). So you should modify it to position object in yAxis, like in the example: http://jsfiddle.net/F4qS8/701/