|
- import * as am4core from "@amcharts/amcharts4/core";
- import * as am4charts from "@amcharts/amcharts4/charts";
- import * as am4plugins_forceDirected from "@amcharts/amcharts4/plugins/forceDirected";
-
- // Create chart
- let chart = am4core.create("carto-bulles", am4plugins_forceDirected.ForceDirectedTree);
-
- // Create series
- let series = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())
-
- series.dataSource.url = routes.app_carto_json;
- // Set data
- // series.data = [{
- // "name": "Nos révoltes",
- // "link": ["Nos rêves"],
- // "children": [{
- // "name": "A1", "value": 100
- // }, {
- // "name": "A2", "value": 60
- // }, {
- // "name": "A3", "value": 30
- // }]
- // }, {
- // "name": "Nos rêves",
- // "link": ["Les actions \n inspirantes"],
- // "children": [{
- // "name": "B1", "value": 135
- // }, {
- // "name": "B2", "value": 98
- // }, {
- // "name": "B3", "value": 56
- // }]
- // }, {
- // "name": "Les actions \n inspirantes",
- // "link": ["Les actions \n à booster"],
- // "children": [{
- // "name": "C1", "value": 335
- // }, {
- // "name": "C2", "value": 148
- // }, {
- // "name": "C3", "value": 126
- // }, {
- // "name": "C4", "value": 26
- // }]
- // }, {
- // "name": "Les actions \n à booster",
- // "link": ["Nos révoltes"],
- // "children": [{
- // "name": "D1", "value": 415
- // }, {
- // "name": "D2", "value": 148
- // }, {
- // "name": "D3", "value": 89
- // }, {
- // "name": "D4", "value": 64
- // }, {
- // "name": "D5", "value": 16
- // }]
- // }];
-
- series.nodes.template.events.on("hit", function(event) {
- console.log(event.target.dataItem.nb);
- });
-
- series.manyBodyStrength = -25;
- series.links.template.strength = 2;
- series.centerStrength = 1.2;
-
- //active le zoom
- chart.zoomable = true;
- //Nombre de level affiché par défaut
- series.maxLevels = 1
-
- //link entre "frere"
- // series.dataFields.id = "name";
- // series.dataFields.linkWith = "link";
-
- //distance entre les bulles
- series.links.template.distance = 1.7;
-
- // Set up data fields
- series.dataFields.name = "name";
- series.dataFields.children = "children";
- series.dataFields.nb = "nb";
-
- // Add labels
- series.nodes.template.label.text = "{name}";
- series.fontSize = 20;
- series.minRadius = 70;
- series.maxRadius = 100;
-
- //Couleur des bulles
- series.colors.list = [
- am4core.color("#dc5b2f"),
- am4core.color("#fce767"),
- am4core.color("#97533a"),
- am4core.color("#568b6f")
- ];
-
- //Apparence des liens entre les bulles
- series.links.template.strokeWidth = 5;
- series.links.template.strokeOpacity = 1;
-
- //tooltip
- series.nodes.template.tooltipText = "{nb}";
|
