Closed quesurifn closed 6 years ago
Hello,
I am recieving error #17. Im not sure if this is normal. I have double checked the dependancies listed here:
How can this be fixed?
<template> <div class="hello"> <!-- <h1>{{ msg }}</h1> --> <div class="row"> <div class="col-md-12"> <gmap-map style="width: 100%; height: 450px;" :center="{lat: 41.8781, lng: -87.629798}" :zoom="12" :map-type-id="roadmap" :options="{styles: mapStyles}" > </gmap-map> </div> </div> <div class="row"> <div class="col-md-6"> <vue-highcharts :options="heatmapOptions" ref="heatmapChart"></vue-highcharts> </div> </div> </div> </template> <script> import * as VueGoogleMaps from 'vue2-google-maps' import VueHighcharts from 'vue2-highcharts' import Highcharts from 'highcharts' import Heatmap from '../../node_modules/highcharts/modules/heatmap.js' import Exporting from '../../node_modules/highcharts/modules/exporting.js' import Data from '../../node_modules/highcharts/modules/data.js' import BoostCanvas from '../../node_modules/highcharts/modules/boost-canvas.js' import Boost from '../../node_modules/highcharts/modules/boost.js' import axios from 'axios'; Heatmap(Highcharts) Exporting(Highcharts) Data(Highcharts) BoostCanvas(Highcharts) Boost(Highcharts) import Vue from 'vue'; Vue.use(VueGoogleMaps, { load: { key: 'AIzaSyAeRd_fOOHn4GCQSeVhgm7ioUjXypqj2C8', // libraries: 'places', //// If you need to use place input } }) export default { components: { VueHighcharts }, name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App', heatMapData: {} } }, created() { axios.get('https://api.myjson.com/bins/riv3h') .then(function(response) { console.log(response) Vue.heatMapData = response.data }) .catch(function(err) { console.error(err) }) }, computed: { mapStyles() { return [{ stylers: [{ hue: '#890000' }, { visibility: 'on' }, { gamma: 0.5 }, { weight: 0.5 }] }, { elementType: 'labels', stylers: [{ visibility: 'off' }] }, { featureType: 'water', stylers: [{ color: '#890000' }] }]; }, heatmapOptions() { return { data: { json: this.heatMapData }, chart: { type: 'heatmap', margin: [60, 10, 80, 50] }, boost: { useGPUTranslations: true }, title: { text: 'Highcharts heat map', align: 'left', x: 40 }, subtitle: { text: 'Temperature variation by day and hour through 2013', align: 'left', x: 40 }, xAxis: { type: 'datetime', min: Date.UTC(2013, 0, 1), max: Date.UTC(2014, 0, 1), labels: { align: 'left', x: 5, y: 14, format: '{value:%B}' // long month }, showLastLabel: false, tickLength: 16 }, yAxis: { title: { text: null }, labels: { format: '{value}:00' }, minPadding: 0, maxPadding: 0, startOnTick: false, endOnTick: false, tickPositions: [0, 6, 12, 18, 24], tickWidth: 1, min: 0, max: 23, reversed: true }, colorAxis: { stops: [ [0, '#3060cf'], [0.5, '#fffbbc'], [0.9, '#c4463a'], [1, '#c4463a'] ], min: -15, max: 25, startOnTick: false, endOnTick: false, labels: { format: '{value}℃' } }, series: [{ boostThreshold: 100, borderWidth: 0, nullColor: '#EFEFEF', colsize: 24 * 36e5, // one day tooltip: { headerFormat: 'Temperature<br/>', pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>' }, turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release }] } } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
Hi @quesurifn , the code looks normal。I'm not sure if the problem is on the heatmapOptions.data option。 According to data | Highcharts API Reference, it does not support json option in the data modules.
heatmapOptions.data
json
Hello,
I am recieving error #17. Im not sure if this is normal. I have double checked the dependancies listed here:
How can this be fixed?