Question

solid-gauge.src.js：52未捕获的TypeError：无法读取未定义的属性'parse'

exporting.src.js：39未捕获的TypeError：无法读取未定义的属性'addEvent'>]

2. export-data.src.js：41未捕获的TypeError：无法r

3. accessibility.src.js：44未捕获的TypeError：无法读取未定义的属性'merge'

4. main.js：886 Uncaught ReferenceError：未定义Highcharts

6. <!-------//map-->
   <script src="https://code.highcharts.com/7/highcharts.js"></script>
   <script src="https://code.highcharts.com/7/modules/data.js"></script>
   <script src="https://code.highcharts.com/7/modules/series-label.js"></script>
   <script src="https://code.highcharts.com/maps/7/modules/map.js"></script>
   <script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
   <!-------map\\-->
   <!-------//guage-->
   <script src="https://code.highcharts.com/highcharts.js"></script>
   <script src="https://code.highcharts.com/highcharts-more.js"></script>
   <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
   <script src="https://code.highcharts.com/modules/exporting.js"></script>
   <script src="https://code.highcharts.com/modules/export-data.js"></script>
   <script src="https://code.highcharts.com/modules/accessibility.js"></script>
   <!-------guage\\-->
       

Answer 1

// gauge

var gaugeOptions = {
  chart: {
    type: 'solidgauge'
  },

  title: null,

  pane: {
    center: ['50%', '85%'],
    size: '100%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },

  exporting: {
    enabled: false
  },

  tooltip: {
    enabled: false
  },

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

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

// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
  yAxis: {
    min: 0,
    max: 200,
    title: {
      text: 'Speed'
    }
  },

  credits: {
    enabled: false
  },

  series: [{
    name: 'Speed',
    data: [80],
    dataLabels: {
      format: '<div style="text-align:center">' +
        '<span style="font-size:25px">{y}</span><br/>' +
        '<span style="font-size:12px;opacity:0.4">km/h</span>' +
        '</div>'
    },
    tooltip: {
      valueSuffix: ' km/h'
    }
  }]

}));

// The RPM gauge
var chartRpm = Highcharts.chart('container-rpm', Highcharts.merge(gaugeOptions, {
  yAxis: {
    min: 0,
    max: 5,
    title: {
      text: 'RPM'
    }
  },

  series: [{
    name: 'RPM',
    data: [1],
    dataLabels: {
      format: '<div style="text-align:center">' +
        '<span style="font-size:25px">{y:.1f}</span><br/>' +
        '<span style="font-size:12px;opacity:0.4">' +
        '* 1000 / min' +
        '</span>' +
        '</div>'
    },
    tooltip: {
      valueSuffix: ' revolutions/min'
    }
  }]

}));

// Bring life to the dials
setInterval(function() {
  // Speed
  var point,
    newVal,
    inc;

  if (chartSpeed) {
    point = chartSpeed.series[0].points[0];
    inc = Math.round((Math.random() - 0.5) * 100);
    newVal = point.y + inc;

    if (newVal < 0 || newVal > 200) {
      newVal = point.y - inc;
    }

    point.update(newVal);
  }

  // RPM
  if (chartRpm) {
    point = chartRpm.series[0].points[0];
    inc = Math.random() - 0.5;
    newVal = point.y + inc;

    if (newVal < 0 || newVal > 5) {
      newVal = point.y - inc;
    }

    point.update(newVal);
  }
}, 1000);

// MAP

Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/world-population-density.json', function(data) {

  // Prevent logarithmic errors in color calulcation
  data.forEach(function(p) {
    p.value = (p.value < 1 ? 1 : p.value);
  });

  // Initiate the chart
  Highcharts.mapChart('map', {

    chart: {
      map: 'custom/world'
    },


    legend: {
      title: {
        text: 'Population density per km²',
        style: {
          color: ( // theme
            Highcharts.defaultOptions &&
            Highcharts.defaultOptions.legend &&
            Highcharts.defaultOptions.legend.title &&
            Highcharts.defaultOptions.legend.title.style &&
            Highcharts.defaultOptions.legend.title.style.color
          ) || 'black'
        }
      }
    },

    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: 'bottom'
      }
    },

    tooltip: {
      backgroundColor: 'none',
      borderWidth: 0,
      shadow: false,
      useHTML: true,
      padding: 0,
      pointFormat: '<span class="f32"><span class="flag {point.properties.hc-key}">' +
        '</span></span> {point.name}<br>' +
        '<span style="font-size:30px">{point.value}/km²</span>',
      positioner: function() {
        return {
          x: 0,
          y: 250
        };
      }
    },

    colorAxis: {
      min: 1,
      max: 1000,
      type: 'logarithmic'
    },

    series: [{
      data: data,
      joinBy: ['iso-a3', 'code3'],
      name: 'Population density',
      states: {
        hover: {
          color: '#a4edba'
        }
      }
    }]
  });
});

#gauge {
  display: flex;
}

#container-speed {
  width: 400px;
  height: 300px
}

#container-rpm {

  flex-grow: 1;
}

<!-------//map-->
<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/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>


<!-------map\\-->
<!-------//guage-->
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<!-------guage\\-->

<b>Sample gauge</b>
<div id="gauge" class="gauge">
  <div id="container-speed" class="chart-container"></div>
  <div id="container-rpm" class="chart-container"></div>
</div>
<b>Sample map</b>
<div id="map"></div>