Remove Colorrange from Fusion Chart

Asked

Viewed 43 times

0

I’m making a website for a colleague. I made the whole structure according to link (http://acidentesflorestais.info/), but after I set up the structure, a colorrange I don’t know where and I can’t exclude because? And how could I remove?

 <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <!-- Including the map renderer file -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js "></script>
    <!-- Including the map definition file -->
    <script type="text/javascript" src="fusioncharts.espiritosanto.js"></script>
    <!-- Including the fusion theme -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
    <script type="text/javascript">
        FusionCharts.ready(function() {


            var annualPopulation = new FusionCharts({
                "type": "maps/espiritosanto",
                "renderAt": "chart-container",
                "width": "100%",
                "height": "750",
                "dataFormat": "json",
                "dataSource": {
                    // Map Configuration
                    "chart": {
                        "caption": " ",
                        "subcaption": " ",
                        "numbersuffix": "%",
                        "includevalueinlabels": "1",
                        "labelsepchar": ": ",
                        "entityFillHoverColor": "#16a085",
                        "theme": "fusion"
                    },


                }
            });
            annualPopulation.render(function(){
              var paths = document.querySelectorAll("#chart-container path");
              for(let x=0; x < paths.length; x++){
                 paths[x].onclick = function(){
                    var area = document.querySelector(".fc__tooltip").textContent;
                    var area2="municipios.php?nome=";
                    var area3=area2+area;
                    window.location.href = area3;
                 }
              }
            });

        });
    </script>

</head>
    <body>
                                            <div id="chart-container"></div>
    </body>
javascript

1 answer

0


You can remove the element by the class that ends with fc-gradient-legend (which is the colorrange div class) after the component has been rendered using the event renderComplete:

events:{
   'renderComplete': function() {
      document.querySelector("g[class$='fc-gradient-legend']").outerHTML = '';
   }
}

See in practice:

FusionCharts.ready(function() {

   var annualPopulation = new FusionCharts({
       "type": "maps/espiritosanto",
       "renderAt": "chart-container",
       "width": "100%",
       "height": "750",
       "dataFormat": "json",
       "dataSource": {
           // Map Configuration
           "chart": {
               "caption": " ",
               "subcaption": " ",
               "numbersuffix": "%",
               "includevalueinlabels": "1",
               "labelsepchar": ": ",
               "entityFillHoverColor": "#16a085",
               "theme": "fusion"
           },
       },
      events:{
         'renderComplete': function() {
            document.querySelector("g[class$='fc-gradient-legend']").outerHTML = '';
         }
      }            });
   annualPopulation.render(function(){
     var paths = document.querySelectorAll("#chart-container path");
     for(let x=0; x < paths.length; x++){
        paths[x].onclick = function(){
           var area = document.querySelector(".fc__tooltip").textContent;
           var area2="municipios.php?nome=";
           var area3=area2+area;
           window.location.href = area3;
        }
     }
   });

});
<div id="chart-container"></div>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
 <!-- Including the map renderer file -->
 <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js "></script>
 <!-- Including the map definition file -->
 <script type="text/javascript" src="fusioncharts.espiritosanto.js"></script>
 <!-- Including the fusion theme -->
 <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

  • friend I need now to carry one color for each city. Could I? Could I have? Could I have an idea of what I can do?

  • I thought of Document.querySelector(".Fill"). textContent; .

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.