1

Estoy haciendo unas pruebas con Highcharts y estoy creando los nodos por separado y no todo junto como ellos lo hacen.

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>

Me está marcando un error en obj.chart.type = 'pie'; como si el nodo chart no existiese, si mal no recuerdo, Javascript si el nodo no existe lo crea solo, o cómo podría corregir esa parte?

1 respuesta 1

1

No puedes referenciar propiedades de objeto que no existen. La forma correcta seria asi:

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>

2
  • Gracias sensei. Commented el 21 jun. 2018 a las 18:20
  • De nada Alberto san
    – alanfcm
    Commented el 21 jun. 2018 a las 18:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.