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

Stack Overflow用户

提问于 2018-01-12 04:18:15

回答 2查看 45关注 0票数 0

我想要制作图表

这幅图像

我得到了一个源代码，可能会从此链接生成一个类似的图表。

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(“容器”，{ 未定义的ReferenceError:未定义高级图表

我从代码中复制了所有的源代码，我不认为我遗漏了什么。请帮帮忙

javascript

jquery

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-01-12 04:25:29

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

<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:而且，通常最好在结束'</body>'标记之前将所有脚本放在html的其余部分之后。它允许在js有机会将任何更改应用到js之前先加载所有html。

票数 2

Stack Overflow用户

发布于 2018-01-12 04:25:45

在加载相关库之前，不能使用类似High图表的方法。当一个脚本标记中的代码依赖于另一个脚本标记中的代码时，脚本加载的顺序很重要。

切换脚本的顺序，它在下面运行良好

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