When I tried to implement a pie chart in angular13 , an error occurred like this, Module "ng2-charts" has no exported members 'monkeyPatchChartJsTooltip'.Please give me a solution for this.
Related
I have 1 problem, normally it works fine, but today when I build, this error appears
Module '"#hookstate/core"' has no exported member 'useState'.
I use NextJS
enter image description here
I hope to get help. Thank you
I am trying to do something I feel is very simple, yet seems that I am clearly misunderstanding a crucial piece of the mapbox addlayer feature.
The Goal
Create dynamically identified icons, based on a features data value (e.g. geojson feature data vale title: "walmart"). Essentially just adding dynamic store icons from the sprite image when those locations are queried via tilequery. picture representation here
The problem
I keep getting an error when trying to use the sprite values from the style. Error: util.js:349 Image "airport-11" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.
I see tons of resources talking about sprites, but none discuss how to exactly implement them in this fashion. I have even tried querying the sprite and then adding the values using dot notation to access sprite values. This gives an error of "undefined" and invalid value.
Example code:
map.addLayer({
id: "tilequery-points",
type: "symbol",
source: "tilequery", // Set the layer source
layout: {
"icon-image": [
"match",
["get", "title"],
["HEB"],
"H-E-B_logo",
["Pilot Flying j"],
sprite.Pilot_Travel_Centers_logo,
// "Pilot_Travel_Centers_logo",
["Dollar General"],
"Dollar_General_logo",
["Cumberland Farms Corp"],
"Cumberland_Farms_logo (1)",
["CEFCO"],
"CEFCO-convenience-stores-Logo_510px",
["BJs Wholesale Inc"],
The Question
How do I access the sprite values and not get an error?!!!
Thanks for the help! I Wouldn't ask if I didn't need it!
UPDATE
I have figured out that to use sprite images inside of any layer, the images will automatically be available if you have them in your Mapbox studio sprite image collection. The confusion was that previously, I was not able to use them from link. However, it should work automatically.
Hope it helps!
It's true the documentation about sprites is not super clear. I'll try to summarise (simplifying a bit).
A Mapbox GL style has one sprite. That's a PNG containing all the icons, plus a JSON file specifying what each icon is called (its icon ID), and where it located within the PNG. The sprite is specified by giving a URL as the sprite property: https://docs.mapbox.com/mapbox-gl-js/style-spec/sprite/
You can also add images to the sprite dynamically after the map loads, with map.loadImage and map.addImage, specifying the icon ID.
To display an icon, you use that same ID in a symbol layer: "icon-image": "myicon".
You can run into trouble when you try to combine your own icons with those in a Mapbox basemap (which are Maki icons with names like `airport-11').
To combine them, you can do one of these three things:
upload your icons to a style in Mapbox Studio
load your icons dynamically
generate a new sprite sheet offline, using something like mbsprite
I don't know what you meant about "dot notation", but no, that's not the right path.
This might be a very particular use case but I have a React app which uses Victory Charts. I need to get a screenshot of the chart and export it as a png.
I have done some research and here are some ideas that I have so far:
Export it using some functionality within victory.js itself. The closest I could get is: https://github.com/FormidableLabs/victory/issues/781#event-1281057513 But this approach doesn't work. I've tested it. It gives me a reference to the Chart's container though which might be useful.
Use some 'screenshot' library I tried saveSvgAsPng and made this: https://codesandbox.io/s/victory-chart-to-png-k9zo8 But this doesn't work too and I can't figure out why not.
Use some sort of implementation using D3.js upon which victory charts is built. But I have no idea how to do that too.
If you guys have any idea about how this sort of thing can be done, please let me know.
In order to saveSvgAsPng to work, you have to pass an <SVG> element to it.
After reviewing your code at https://codesandbox.io/s/victory-chart-to-png-k9zo8, you evidently passed a Container element to it.
There this.state.ref refers to the Container element but not the <SVG> element. Change this.state.ref to this.state.ref.firstChild which refers to the <SVG> element in the container. And the library works like a charm in downloading the SVG as PNG.
So I read on the docs that responsiveness for amchart 4 is still currently under development, and so perhaps that explains my difficulties here.
I'm trying to create a barchart that will shrink properly without distorting how the data is displayed. I've tried shrinking the parent container with an #media rule, but that distorted the data.
What's happening: When I shrink the view (i.e. open up inspector or run the web app on a smaller machine) half the category labels on the X-axis are disappearing for some strange reason. It seems to be every other label exactly is gone.
I've tried setting:
categoryAxis.minWidth = 0;
As an approximation of v3's minHorizontalGap property but of course they aren't the same.
I've tried setting the column width in hoped that that would influence the labels.
series.columns.template.width = am4core.percent(50);
And finally I've tried setting both the whole chart to responsive, and the categoryAxis:
categoryAxis.responsive.enabled = true;
But doing this gives me the following error which I can't find support for online:
bootstrap:114 Uncaught (in promise) Error: Loading chunk vendors~responsivedefaults failed.
I'm not sure what the problem is or how to resolve it, I can't believe they'd release a version of amcharts that didn't have responsivity in this age, and so I think it has to be something I'm doing wrong.
So I found the v4 equivalent to minHorizontalGap and that has solved the problem for me.
categoryAxis.renderer.minGridDistance = 60;
It's as simple as that. I still don't know why responsive.enabled doesn't work, but this is a satisfactory solution.
In sencha (http://www.sencha.com/products/extjs/) I was wondering is it possible if i can have a bar chart, or a pie chart and have the data exported? I would like to go back from a chart to a printed data in my hand.
** if i have a bar chart that has data already plotted on it and now i would like to get the x-axis in one column and have the y-axis in another column but i would like to have that exported so i can printed it out. I do not want the chart to be printed.
My question is: Is there a way to do that? and if so what is the code that is needed or used?
CAN I ALSO DO IT IN ZINGCHARTS.COM
what about zingcharts?? i have done my research and found that they have this code called zingchart.exec("yourChartId", "exportdata"); i just dont know how exactly to put it in my zingcharts.rendering function can i get help on that?
I see that this is an older question, but hopefully this will help you or someone else with a similar issue.
The ZingChart exportdata method doesn't actually go in the zingchart.render method, it's its own API method.
zingchart.exec('myChartDiv', 'exportdata', {
url : 'www.zingchart.com/resources/exportdataurl.php'
});
'myChartDiv' refers to the id given to the div in your page where your chart renders. You can either set the 'url' option in the export data method options, like I did above or you can set the 'exportdataurl'. The data is sent as POST data via HTTP.
Just to get the data? Sure.
Charts are populated by a store object, which is a container with all the data.
To get the data out of the store is pretty forward.
Eg:
store.each(function(store,record,e){console.log(record);});
You can probably use Export store to Excel user extension published on Sencha forum.