Я пытаюсь использовать карту HighChart и solid guage, они оба работают для моих данных независимо, но я получаю много ошибок, я помещаю их в файл - PullRequest
Новая
       3

Я пытаюсь использовать карту HighChart и solid guage, они оба работают для моих данных независимо, но я получаю много ошибок, я помещаю их в файл

0 голосов
/ 07 мая 2020

Ниже приводится список ошибок, которые я получил только потому, что поместил карту и датчик Hightchart в один файл. Если я потратил на это часы ... Помогите мне

1.highcharts-more.sr c. js: 42 Uncaught TypeError: невозможно прочитать свойство addEvent из undefined

solid -gauge.sr c. js: 52 Uncaught TypeError: невозможно прочитать свойство 'parse' неопределенного

exporting.sr c. js: 39 Uncaught TypeError: Невозможно прочитать свойство 'addEvent' неопределенного

export-data.sr c. js: 41 Uncaught TypeError: Cannot r

accessibility.sr c. js: 44 Uncaught TypeError: Невозможно прочитать свойство 'merge' неопределенного

main. js: 886 Uncaught ReferenceError: Highcharts не определен 

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

1 Ответ

2 голосов
/ 08 мая 2020

Вы снова определяете пространство имен Highcharts в объявлении датчика. Вам необходимо удалить повторяющиеся экземпляры, когда вы помещаете их в файл.

Ниже приведен пример рабочего кода для карты и датчика: 

// 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/highcharts@v7.0.0/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>
...