Question

我想生成类似于的图表 this image

我有一个源代码可能会产生this link

的类似图表

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  title: {
    text: 'Monthly Average Temperature'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
  },
  yAxis: {
    title: {
      text: 'Temperature'
    },
    labels: {
      formatter: function() {
        return this.value + '°';
      }
    }
  },
  tooltip: {
    crosshairs: true,
    shared: true
  },
  plotOptions: {
    spline: {
      marker: {
        radius: 4,
        lineColor: '#666666',
        lineWidth: 1
      }
    }
  },
  series: [{
    name: 'Tokyo',
    marker: {
      symbol: 'square'
    },
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
      y: 26.5,
      marker: {
        symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
      }
    }, 23.3, 18.3, 13.9, 9.6]

  }, {
    name: 'London',
    marker: {
      symbol: 'diamond'
    },
    data: [{
      y: 3.9,
      marker: {
        symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
      }
    }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 50, 4.8]
  }]
});

<body>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/data.js"></script>
  <script src="https://code.highcharts.com/modules/series-label.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>

  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>

但是当我将它运行到我自己的浏览器上时，会出现这个错误

Highcharts.chart（'container'，{
未捕获的ReferenceError：Highcharts是未定义

我复制了该代码的所有来源，我不认为我错过了什么。请帮忙

Answer 1

您为图表实现的代码是在插件本身实现之前。这一切

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

应放在包含以下内容的脚本之前：

 Highcharts.chart('container', {

代码。

试试这个并告诉我。

Ps：通常最好在所有其他html之后的'</body>'标签关闭之前放置所有脚本。它允许在js有机会对其应用任何更改之前首先加载所有html。

Answer 2

在加载相关库之前，您无法使用Highcharts等方法。当一个脚本标记中的代码依赖于另一个

中的代码时，脚本加载的顺序很重要

切换脚本的顺序，它可以正常工作

＆＃13;

<!DOCTYPE html>
<html>

<head> 
</head>

<body>
  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
  </script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/data.js"></script>
  <script src="https://code.highcharts.com/modules/series-label.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script type="text/javascript">
    Highcharts.chart('container', {
      chart: {
        type: 'spline'
      },
      title: {
        text: 'Monthly Average Temperature'
      },
      subtitle: {
        text: 'Source: WorldClimate.com'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ]
      },
      yAxis: {
        title: {
          text: 'Temperature'
        },
        labels: {
          formatter: function() {
            return this.value + '°';
          }
        }
      },
      tooltip: {
        crosshairs: true,
        shared: true
      },
      plotOptions: {
        spline: {
          marker: {
            radius: 4,
            lineColor: '#666666',
            lineWidth: 1
          }
        }
      },
      series: [{
        name: 'Tokyo',
        marker: {
          symbol: 'square'
        },
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
          y: 26.5,
          marker: {
            symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
          }
        }, 23.3, 18.3, 13.9, 9.6]

      }, {
        name: 'London',
        marker: {
          symbol: 'diamond'
        },
        data: [{
          y: 3.9,
          marker: {
            symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)'
          }
        }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 50, 4.8]
      }]
    });
  </script>

</body>

</html>

＆＃13;

如何在Javascript中创建包含多个数据的图表

2 个答案: