在jsfiddle中正常工作时，无法在浏览器上显示我的图表

debugcn 发表于 Dev

萨拉·NCIB

我可以在jsfiddle上完美显示我的图表，但无法在我的浏览器上显示。我尝试导入jquery，但它也无法正常工作。有人可以帮我吗？

您将在这里找到我的代码。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

非常感谢你。

萨拉巴杜

要使小提琴独自工作，您需要：

创建一个HTML文件
将小提琴代码添加到html正文中
使用小提琴js代码在按钮上创建脚本标签
添加由jsfiddle管理的依赖项（尝试使用jquery）

还要jQuery URL需要正确的URL <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

在这里的finalcode，您可以将其保存为html文件，然后在浏览器中打开：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script src="https://code.highcharts.com/4.1.9/highcharts.js"></script>
    <script src="https://code.highcharts.com/4.1.9/highcharts-more.js"></script>

    <script src="https://code.highcharts.com/4.1.9/modules/solid-gauge.js"></script>

    <div style="width: 600px; height: 400px; margin: 0 auto">
      <div
        id="container-speed"
        style="width: 300px; height: 200px; float: left"
      ></div>
      <div
        id="container-rpm"
        style="width: 300px; height: 200px; float: left"
      ></div>
    </div>

    <script>
      $(function() {
        var gaugeOptions = {
          chart: {
            type: 'solidgauge'
          },

          title: null,

          pane: {
            center: ['50%', '85%'],
            size: '140%',
            startAngle: -90,
            endAngle: 90,
            background: {
              backgroundColor:
                (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
              innerRadius: '60%',
              outerRadius: '100%',
              shape: 'arc'
            }
          },

          tooltip: {
            enabled: false
          },

          // the value axis
          yAxis: {
            stops: [
              [0.1, '#55BF3B'], // green
              [0.5, '#DDDF0D'], // yellow
              [0.9, '#DF5353'] // red
            ],
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
              y: -70
            },
            labels: {
              y: 16
            }
          },

          plotOptions: {
            solidgauge: {
              dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
              }
            }
          }
        }

        // The speed gauge
        $('#container-speed').highcharts(
          Highcharts.merge(gaugeOptions, {
            yAxis: {
              min: 10000,
              max: 20000,
              mean: 15000,
              title: {
                text: 'Prix par rapport au marché'
              }
            },

            credits: {
              enabled: false
            },

            series: [
              {
                name: 'Prix par rapport au marché',
                data: [17000]
              },
              {
                name: 'Foo',
                type: 'gauge',
                data: [17000]
              }
            ]
          })
        )

        // Bring life to the dials
      })
    </script>
  </body>
</html>