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

xqk2d5yq 于 2022-11-11 发布在 Highcharts

关注(0)|答案(1)|浏览(195)

我目前在Jekyll中使用highcharts，并且看过如何将两个“div”放在一起的文档，但是我不确定如何在Jekyll中使用CSS来完成这一点。我目前的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.中实现这一点，我试图编辑/修改我的jekyll网站的标题标题，但没有成功，因此，不确定如何用css做到这一点。
正在寻找任何建议，如何做到这一点，无论是修改我的源HTML文件或我的Jekyll CSS文件！

highcharts

来源：https://stackoverflow.com/questions/70401955/put-two-highcharts-charts-side-by-side-on-a-jekyll-blog-beautiful-jekyll

1条答案

按热度按时间

rggaifut1#

我通过将Bootstrap库添加到项目中开发了以下应用程序。在足够大的屏幕上，两个图形将并排显示。当页面由于响应设计规则而变得太小时，图形将一个接一个地显示。单击此链接测试应用程序。

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

赞(0）回复(0）举报 2022-11-11

我来回答

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

1条答案

相关问题

热门标签

最新问答