在 Jekyll 博客上并排放置两个 Highcharts 图表 (beautiful-jekyll)

Question

我目前正在使用 Jekyll 中的 highcharts 并且已经看过关于如何将两个 'divs' 在一起，但我不确定如何使用 CSS 在 Jekyll 中做到这一点。我当前的 jsfiddle 是 here 两个图表堆叠的地方。

<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>

我看过有关如何执行此操作的文档，但不确定如何在 beautiful-jekyll, a custom jekyll theme. 中实现此操作我尝试 edit/modify 我的 jekyll 网站的标题，但没有成功，因此，不确定如何使用 css.

执行此操作

正在寻找有关如何通过修改我的源 HTML 文件或我的 Jekyll CSS 文件来执行此操作的任何建议！

Answer 1

我通过添加 Bootstrap library to the project. On a large enough screen, two graphs will appear side by side. Graphics will appear one after the other when the page gets too small due to responsive design rules. Click this link 来测试应用程序来开发以下应用程序。

<!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>

在 Jekyll 博客上并排放置两个 Highcharts 图表 (beautiful-jekyll)

Put two Highcharts Charts Side by Side on a Jekyll Blog (beautiful-jekyll)

html

javascript

css

highcharts

jekyll