0
304
ViewsColoque dos gráficos de Highcharts uno al lado del otro en un blog de Jekyll (hermoso-jekyll)
Actualmente estoy trabajando con highcharts en Jekyll y he visto documentación sobre cómo juntar dos 'divs', pero no estaba seguro de cómo podría hacer esto en Jekyll usando CSS. Mi jsfiddle actual está aquí donde se apilan los dos gráficos.
<head> <script src="https://code.highcharts.com/highcharts.js"></script> </head> <div id="container" style="height: 400px"></div> <div id="container2" style="height: 400px"></div> <script> const chart = Highcharts.chart('container', { //plot options code with type: 'datetime' plotOptions: { series: { pointStart: Date.UTC(2020, 2, 4), pointInterval: 24 * 3600 * 1000 } }, type: 'line', tooltip: { shared: true, split: false, enabled: true, }, xAxis: { type: 'datetime' }, series: [{ data: [1, 2, 3, 4, 5], }, { data: [5, 15, 20, 10, 1], } ] }); </script> <script> const chart2 = Highcharts.chart('container2', { //plot options code with type: 'datetime' plotOptions: { series: { pointStart: Date.UTC(2020, 2, 4), pointInterval: 24 * 3600 * 1000 } }, type: 'line', tooltip: { shared: true, split: false, enabled: true, }, xAxis: { type: 'datetime' }, series: [{ data: [5, 2, 1.5, 1, 0.9], }, { data: [13, 15, 20, 30, 11], } ] }); </script>He visto documentación sobre cómo hacer esto, pero no estaba seguro de cómo implementarlo en beautiful-jekyll, un tema personalizado de jekyll. Intenté editar/modificar los títulos de los encabezados de mi sitio web jekyll, pero no tuve éxito y, por lo tanto, no estaba seguro de cómo hacerlo con css.
¡Estaba buscando sugerencias sobre cómo hacer esto modificando mi archivo HTML de origen o mi archivo Jekyll CSS!
1 answers
Answer question0
Desarrollé la siguiente aplicación agregando la biblioteca Bootstrap al proyecto. En una pantalla lo suficientemente grande, aparecerán dos gráficos uno al lado del otro. Los gráficos aparecerán uno tras otro cuando la página se vuelva demasiado pequeña debido a las reglas de diseño adaptable. Haga clic en este enlace para probar la aplicación.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.highcharts.com/highcharts.js"></script> <title>Document</title> </head> <body> <!-- Remove the styles applied to the following <div> element to position the container at (0,0) in the application. --> <div class="row" style="padding: 50px; margin-top: 25px;"> <div class="col-md-6"> <div id="container" style="height: 500px"></div> </div> <div class="col-md-6"> <div id="container2" style="height: 500px"></div> </div> </div> <script> const chart = Highcharts.chart('container', { //plot options code with type: 'datetime' plotOptions: { series: { pointStart: Date.UTC(2020, 2, 4), pointInterval: 24 * 3600 * 1000 } }, type: 'line', tooltip: { shared: true, split: false, enabled: true, }, xAxis: { type: 'datetime' }, series: [{ data: [1, 2, 3, 4, 5], }, { data: [5, 15, 20, 10, 1], } ] }); </script> <script> const chart2 = Highcharts.chart('container2', { //plot options code with type: 'datetime' plotOptions: { series: { pointStart: Date.UTC(2020, 2, 4), pointInterval: 24 * 3600 * 1000 } }, type: 'line', tooltip: { shared: true, split: false, enabled: true, }, xAxis: { type: 'datetime' }, series: [{ data: [5, 2, 1.5, 1, 0.9], }, { data: [13, 15, 20, 30, 11], } ] }); </script> </body> </html>