加载highcharts-3d.js后屏幕空白

问题描述 投票:1回答:1

我正在使用csvURL函数来创建一个高图。下面的脚本工作,但是当我添加highcharts-3d.js来创建3D图表时,屏幕变为空白。

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Highcharts Example</title>

  <!-- 1. Add these JavaScript inclusions in the head of your page -->
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/data.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


</head>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->

<body>
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
      Highcharts.chart('container', {

        chart: {
          type: 'bar',
          options3d: {
            enabled: true,
            alpha: 15,
            beta: 0,
            depth: 50,
            viewDistance: 25
          }
        },
        data: {
          csvURL: 'https://raw.githubusercontent.com/peoplecure/FunTravel/master/fake%20column.csv'
        },
        title: {
          text: 'Made up Data'
        },
        xAxis: {
          type: 'category',
          labels: {
            rotation: -45,
            style: {
              fontFamily: 'Arial',
              fontSize: '12px'
            }
          }
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Number of Cups'
          }
        },
        exporting: {
          enabled: false
        },
        credits: {
          enabled: false
        }
      })
    });

    function showValues() {
      $('#alpha-value').html(chart.options.chart.options3d.alpha);
      $('#beta-value').html(chart.options.chart.options3d.beta);
      $('#depth-value').html(chart.options.chart.options3d.depth);
    }

    // Activate the sliders
    $('#sliders input').on('input change', function() {
      chart.options.chart.options3d[this.id] = parseFloat(this.value);
      showValues();
      chart.redraw(false);
    });

    showValues();
  </script>

  <!-- 3. Add the container -->
  <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

</body>

</html>

我把它插入头部:

<script src="/https://code.highcharts.com/highcharts-3d.js"><script>

如何创建3D图表?显然,我的方法不起作用。

顺便说一句,抱歉宽阔的空间。我只能使用记事本,并且标签布置不会在这里粘贴得很漂亮。

javascript highcharts
1个回答
1
投票

脚本标记有拼写错误并添加错误。改变这一点

 <script src="/https://code.highcharts.com/highcharts-3d.js"><script>

<script src="https://code.highcharts.com/highcharts-3d.js"></script>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Highcharts Example</title>

  <!-- 1. Add these JavaScript inclusions in the head of your page -->
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/data.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://code.highcharts.com/highcharts-3d.js"></script>

</head>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->

<body>
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
      Highcharts.chart('container', {

        chart: {
          type: 'bar',
          options3d: {
            enabled: true,
            alpha: 15,
            beta: 0,
            depth: 50,
            viewDistance: 25
          }
        },
        data: {
          csvURL: 'https://raw.githubusercontent.com/peoplecure/FunTravel/master/fake%20column.csv'
        },
        title: {
          text: 'Made up Data'
        },
        xAxis: {
          type: 'category',
          labels: {
            rotation: -45,
            style: {
              fontFamily: 'Arial',
              fontSize: '12px'
            }
          }
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Number of Cups'
          }
        },
        exporting: {
          enabled: false
        },
        credits: {
          enabled: false
        }
      })
    });

    function showValues() {
      $('#alpha-value').html(chart.options.chart.options3d.alpha);
      $('#beta-value').html(chart.options.chart.options3d.beta);
      $('#depth-value').html(chart.options.chart.options3d.depth);
    }

    // Activate the sliders
    $('#sliders input').on('input change', function() {
      chart.options.chart.options3d[this.id] = parseFloat(this.value);
      showValues();
      chart.redraw(false);
    });

    showValues();
  </script>

  <!-- 3. Add the container -->
  <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

</body>

</html>
© www.soinside.com 2019 - 2024. All rights reserved.