2 графика на hightchart на 1 странице

240

24 апреля 2017, 03:38

Добрый день. Нужно вывести 2 графика на HightCharts на 1 странице.

Вывожу получаю 1 график.

var options; 
var chart; 
$(document).ready(function() { 
init(); 
  
}); 
  
function init() { 
options = { 
chart: { 
renderTo: 'container', 
type: 'line' 
}, 
title: { 
text: '' 
}, 
subtitle: { 
text: '' 
}, 
xAxis: { 
categories: [], 
  
labels: { 
align: 'center', 
x: -3, 
y: 20, 
formatter: function() { 
return Highcharts.dateFormat('%b-%d', Date.parse(this.value)); 
} 
} 
  
}, 
yAxis: { 
title: { 
text: '' 
} 
}, 
tooltip: { 
enabled: true, 
formatter: function() { 
return '<b>'+ this.series.name +'</b><br/>'+ 
this.x +': '+ this.y; 
} 
}, 
plotOptions: { 
line: { 
cursor: 'pointer', 
point: { 
events: { 
click: function() { 
  
 
  
} 
} 
}, 
dataLabels: { 
enabled: true 
} 
} 
}, 
  
series: [{ 
type: 'line', 
name: '', 
data: [] 
}] 
} 
  
$.getJSON("data.php", function(json){ 
options.xAxis.categories = json['category']; 
options.series[0].name = json['name']; 
options.series[0].data = json['data']; 
chart = new Highcharts.Chart(options); 
}); 
} 
  
  
{ 
init(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
  
  
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
 
<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Answer 1

Вы рендерите оба графика в одном контейнере.

$(function() { 
  init('container', 'data.php'); 
  init('container2', 'data2.php'); 
}); 
  
function init(container, dataSource) { 
  options = { 
    chart: { 
      renderTo: container, 
      type: 'line' 
    }, 
    title: { 
      text: '' 
    }, 
    subtitle: { 
      text: '' 
    }, 
    xAxis: { 
      categories: [], 
      labels: { 
        align: 'center', 
        x: -3, 
        y: 20, 
        formatter: function() { 
          return Highcharts.dateFormat('%b-%d', Date.parse(this.value)); 
        } 
      } 
    }, 
    yAxis: { 
      title: { 
        text: '' 
      } 
    }, 
    tooltip: { 
      enabled: true, 
      formatter: function() { 
        return '<b>' + this.series.name +'</b><br/>' + this.x + ': ' + this.y; 
      } 
    }, 
    plotOptions: { 
      line: { 
        cursor: 'pointer', 
        point: { 
          events: { 
          click: function() { 
          } 
        } 
      }, 
      dataLabels: { 
        enabled: true 
      } 
    } 
  }, 
  series: [{ 
    type: 'line', 
    name: '', 
    data: [] 
  }] 
 } 
  
 //$.getJSON(dataSource, function(json) { 
   options.xAxis.categories = []; 
   options.series[0].name = ['Name 1', 'Name 2', 'Name 3']; 
   options.series[0].data = [Math.random(), Math.random(), Math.random()]; 
   chart = new Highcharts.Chart(options); 
 //}); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" style="min-width: 400px; height: 110px; margin: 0 auto"></div> 
<div id="container2" style="min-width: 400px; height: 110px; margin: 0 auto"></div>

Answer 2

$(function() { 
  init('container', 'data.php'); 
  init('container2', 'data2.php'); 
}); 
  
function init(container, dataSource) { 
  options = { 
    chart: { 
      renderTo: container, 
      type: 'line' 
    }, 
    title: { 
      text: '' 
    }, 
    subtitle: { 
      text: '' 
    }, 
    xAxis: { 
      categories: [], 
      labels: { 
        align: 'center', 
        x: -3, 
        y: 20, 
        formatter: function() { 
          return Highcharts.dateFormat('%b-%d', Date.parse(this.value)); 
        } 
      } 
    }, 
    yAxis: { 
      title: { 
        text: '' 
      } 
    }, 
    tooltip: { 
      enabled: true, 
      formatter: function() { 
        return '<b>' + this.series.name +'</b><br/>' + this.x + ': ' + this.y; 
      } 
    }, 
    plotOptions: { 
      line: { 
        cursor: 'pointer', 
        point: { 
          events: { 
          click: function() { 
          } 
        } 
      }, 
      dataLabels: { 
        enabled: true 
      } 
    } 
  }, 
  series: [{ 
    type: 'line', 
    name: '', 
    data: [] 
  }] 
 } 
  
$.getJSON(dataSource, function(json) { 
   options.xAxis.categories = json['category']; 
   options.series[0].name = json['name']; 
   options.series[0].data = json['data']; 
   chart = new Highcharts.Chart(options); 
}); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
  
  
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
 
<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>