The node of an object does not exist

Question

The node of an object does not exist

Navigation

#1 by (1 votes)

1

I'm doing some tests with Highcharts and I'm creating the nodes separately and not all together as they do.

var obj = {}, data = [], series = {}, labels = ['Culiacán', 'Durango', 'Mexicali', 'Monterrey', 'Michoacán', 'Nicaragua', 'Tijuana'];

labels.forEach(function(l){
  let myObj = {};
  myObj.name = l;
  myObj.drilldown = l;
  myObj.y = Math.floor( Math.random() * 1000 );
  data.push( myObj );
});

series.name = 'Incidencias';
series.colorByPoint = true;
series.data = data;

obj.chart.type = 'pie';
obj.title.text = 'Total de registros por Unidad de Negocio';
obj.subtitle.text = 'Da click en cualquier parte del pastel';
obj.plotOptions.series.dataLabels.enabled = true;
obj.plotOptions.series.dataLabels.format = '{point.name}: {point.y:.2f}%';
obj.tooltip.headerFormat = '<span style="font-size:11px">{series.name}</span><br>';
obj.tooltip.pointFormat = '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> del total<br/>';
obj.series = [ series ];



Highcharts.chart('chart', obj);

  #chart{
    min-width: 310px;
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
  }

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div id="chart"></div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

Are you marking an error in obj.chart.type = 'pie'; as if the chart node did not exist, if I remember correctly, Javascript if the node does not exist creates it alone, or how could you correct that part?

javascript highcharts

asked by Alberto Siurob 21.06.2018 в 20:04

source

1 answer

Problem with SQL statement when wanting to group (Group By) Know the name of the directory where I run a powershell script?

score 1 · Accepted Answer

You can not reference object properties that do not exist. The correct way would be like this:

var obj = { 'chart': {},
            'title': {},
            'subtitle': {},
            'plotOptions': { 'series': { 'dataLabels': {}}},
            'tooltip': {}}, data = [], series = {}, labels = ['Culiacán', 'Durango', 'Mexicali', 'Monterrey', 'Michoacán', 'Nicaragua', 'Tijuana'];

labels.forEach(function(l){
  let myObj = {};
  myObj.name = l;
  myObj.drilldown = l;
  myObj.y = Math.floor( Math.random() * 1000 );
  data.push( myObj );
});

series.name = 'Incidencias';
series.colorByPoint = true;
series.data = data;

obj.chart.type = 'pie';
obj.title.text = 'Total de registros por Unidad de Negocio';
obj.subtitle.text = 'Da click en cualquier parte del pastel';
obj.plotOptions.series.dataLabels.enabled = true;
obj.plotOptions.series.dataLabels.format = '{point.name}: {point.y:.2f}%';
obj.tooltip.headerFormat = '<span style="font-size:11px">{series.name}</span><br>';
obj.tooltip.pointFormat = '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> del total<br/>';
obj.series = [ series ];



Highcharts.chart('chart', obj);

#chart{
    min-width: 310px;
    max-width: 600px;
    height: 400px;
    margin: 0 auto;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div id="chart"></div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>