Я работаю с Highcharts и Vue. js, и у меня есть несколько графиков на моей странице. Сейчас я могу без проблем отображать данные на каждом графике. Однако я хочу установить (например) специальный заголовок для определенного c графика.
У меня есть следующие файлы:
StockChart. vue (этот файл является общей частью кода для всех графиков)
<template>
<highcharts class="stock" :constructor-type="'stockChart'" :options="stockOptions"></highcharts>
</template>
<script>
export default {
props : [
'data'
],
data () {
return {
stockOptions: {
rangeSelector: {
selected: 'all',
buttons: [{
type: 'hour',
count: 6,
text: '6h',
}, {
type: 'hour',
count: 24,
text: '24h'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'all',
text: 'All'
}]
},
series: this.data,
title :{
//text : this.data[0].myTitel,
text : this.data[0].myTitel
}
}
}
},
watch: {
data (newValue) {
this.stockOptions.series = newValue
// this.stockOptions.title = newValue[0].myTitel.toString()
console.log(newValue[0].myTitel)
this.stockOptions.data = newValue
},
}
}
</script>
<style scoped>
.stock {
width: 70%;
margin: 0 auto
}
</style>
и второй файл называется Temperature.vue, где отправляю запрос на серию в мою базу данных и возвращаю его для отображения на заданном c графике.
import Influx from 'influx'
import moment from 'moment'
import NProgress from 'nprogress'
import StockChart from '../components/StockChart.vue'
import credInflux from "../constants/influx"
var newPath; //new path taken from the URl
var oldPath; //old path taken from the URL
const client = new Influx.InfluxDB({
database: credInflux.database,
host: credInflux.host,
port: credInflux.port,
protocol: credInflux.protocol,
username: credInflux.username,
password: credInflux.password
});
export default {
props : [
'sectorName'
],
name: 'temperature',
components: {
StockChart,
},
mounted () {
newPath = this.sectorName //save the new path to know witch page to load
console.log("sectorname : " + this.sectorName)
NProgress.start();
this.loadTemperatureFloorData(this.createQueryTemperatureFloor(newPath));
this.loadBatterySensorData(this.createQueryBattery(newPath));
this.loadTemperatureSensorData(this.createQueryTemperatureSensor(newPath));
this.dualData(this.createQueryBattery(newPath))
oldPath=newPath;
},
// done when before the page updated
beforeUpdate() {
this.reloadPage() // function to reload the page
},
methods : {
/**
* reload de page when the user switch the room
*/
reloadPage : function(){
newPath = this.sectorName
if(newPath !== oldPath){
console.log(newPath)
location.reload()
}
},
//----------------------------------------------------------------------------------------------------------
/**
* return the query in function of the path (sectorname) in real life this is the illuminance_value
* @param page
* @returns {string}
*/
createQueryTemperatureFloor : function(page){
let returnQuery
switch(page.toString()){
case "Télécabine":
returnQuery = 'select "payload_fields_Illuminance_value" from mqtt_consumer WHERE topic = ' + "'" + 'ayent_monitoring/devices/ambient_sensor_2/up' + "'"
break;
case "Pralan":
returnQuery = 'select "payload_fields_Illuminance_value" from mqtt_consumer WHERE topic = ' + "'" + 'ayent_monitoring/devices/70b3d57ba0000bd0/up' + "'"
break;
case "Pro de Savioz":
returnQuery = ''
break;
default :
console.log("returnQuery : switch default case")
break;
}
return returnQuery
},
/**
* return the query in function of the path (sectorname) in real life this is the Air temperature_value
* @param page
* @returns {string}
*/
createQueryTemperatureSensor : function(page){
let returnQuery
switch(page.toString()){
case "Télécabine":
returnQuery = 'select "payload_fields_Air temperature_value" from mqtt_consumer WHERE topic = ' + "'" + 'ayent_monitoring/devices/ambient_sensor_2/up' + "'"
break;
case "Pralan":
returnQuery = 'select "payload_fields_Air temperature_value" from mqtt_consumer WHERE topic = ' + "'" + 'ayent_monitoring/devices/70b3d57ba0000bd0/up' + "'"
break;
case "Pro de Savioz":
returnQuery = ''
break;
default :
console.log("returnQuery : switch default case")
break;
}
return returnQuery
},
/**
* return the query in function of the path (sectorname) in real life this is the battery voltage_value
* @param page
* @returns {string}
*/
createQueryBattery : function(page){
let returnQuery
switch(page.toString()){
case "Télécabine":
returnQuery = 'SELECT "payload_fields_Battery voltage_value" from mqtt_consumer WHERE topic = ' + "'" + 'ayent_monitoring/devices/ambient_sensor_2/up' + "'"
break;
case "Pralan":
returnQuery = 'SELECT "payload_fields_Battery voltage_value" from mqtt_consumer WHERE topic = ' + "'" + 'ayent_monitoring/devices/70b3d57ba0000bd0/up' + "'"
break;
case "Pro de Savioz":
returnQuery = ''
break;
default :
console.log("returnQuery : switch default case")
break;
}
return returnQuery
},
//----------------------------------------------------------------------------------------------------------
/**
* load temperature of the floor data from the database
* @param paramQuery
*/
loadTemperatureFloorData: function(paramQuery) {
console.log("query : " + paramQuery)
Promise.all([
client.query(paramQuery),
]).then(parsedRes => {
const mutatedArray = parsedRes.map( arr => {
this.lastTemperatureFloorValue = arr[arr.length-1]['payload_fields_Illuminance_value'].toFixed(2); //to fixed: fix number of digit
return Object.assign({}, {
name: "Temperature au sol", // name on the chart
turboThreshold:60000,
tooltip: {
valueSuffix: ' °C'
},
data: arr.map( obj => Object.assign({}, {
x: (moment(obj.time).unix())*1000,
y: obj['payload_fields_Illuminance_value']
}))
});
});
this.series_temperatureFloor = mutatedArray;
NProgress.done();
}).catch(error => console.log(error))
},
/**
* load temperature of the sensor data from the database
* @param paramQuery
*/
loadTemperatureSensorData: function(paramQuery) {
console.log("query : " + paramQuery)
Promise.all([
client.query(paramQuery),
]).then(parsedRes => {
const mutatedArray = parsedRes.map( arr => {
this.lastTemperatureSensorValue = arr[arr.length-1]['payload_fields_Air temperature_value'].toFixed(2); //to fixed: fix number of digit
return Object.assign({}, {
name: "Temperature sensor", // name on the chart
turboThreshold:60000,
tooltip: {
valueSuffix: ' °C'
},
data: arr.map( obj => Object.assign({}, {
x: (moment(obj.time).unix())*1000,
y: obj['payload_fields_Air temperature_value']
}))
});
});
this.series_temperatureSensor = mutatedArray;
NProgress.done();
}).catch(error => console.log(error))
},
/**
* load Battery data from the database
* @param paramQuery
*/
loadBatterySensorData: function(paramQuery) {
console.log("query : " + paramQuery)
Promise.all([
client.query(paramQuery),
]).then(parsedRes => {
const mutatedArray = parsedRes.map( arr => {
this.lastBatteryValue = arr[arr.length-1]['payload_fields_Battery voltage_value'].toFixed(2); //to fixed: fix number of digit
return Object.assign({}, {
name: "Niveau de batterie", // name on the chart
turboThreshold:60000,
tooltip: {
valueSuffix: ' V'
},
data: arr.map( obj => Object.assign({}, {
x: (moment(obj.time).unix())*1000,
y: obj['payload_fields_Battery voltage_value']
}))
});
});
this.series_battery = mutatedArray;
NProgress.done();
}).catch(error => console.log(error))
},
/**
* load Battery data from the database
* @param paramQuery
*/
dualData: function(paramQuery) {
console.log("query : " + paramQuery)
Promise.all([
client.query(paramQuery),
]).then(parsedRes => {
const mutatedArray = parsedRes.map( arr => {
this.dualValue = arr[arr.length-1]['payload_fields_Battery voltage_value'].toFixed(2); //to fixed: fix number of digit
return Object.assign({}, {
myTitel : 'dual test',
name: "Niveau de batterie", // name on the chart
turboThreshold:60000,
tooltip: {
valueSuffix: ' V'
},
data: arr.map( obj => Object.assign({}, {
x: (moment(obj.time).unix())*1000,
y: obj['payload_fields_Battery voltage_value']
}))
});
});
// console.log(mutatedArray)
this.series_dual= mutatedArray
// this.series_dual =[{
// name: 'Rainfall',
// type: 'spline',
// yAxis: 1,
// data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
// tooltip: {
// valueSuffix: ' mm'
// }
// }],
NProgress.done();
}).catch(error => console.log(error))
},
},
data () {
return {
series_temperatureFloor : [{
turboThreshold:60000,
data: [],
}],
series_temperatureSensor: [{
turboThreshold:60000,
data: [],
}],
series_battery : [{
turboThreshold:60000,
data: [],
}],
series_dual:[{
turboThreshold:60000,
data:[],
}],
lastTemperatureFloorValue:"",
lastTemperatureSensorValue:"",
lastBatteryValue:"",
dualValue:"",
}
},
}
</script>
<style scoped>
</style>
Как видно, в функции dualData: function(paramQuery), Я пытаюсь передать аргумент myTitel (задает заголовок c только для этой диаграммы), и после этого в Stockchart.vue пытаюсь получить это значение, но оно не работает. У кого-нибудь есть идея, почему?
Нужно ли создавать и работать с указанными c Stockchart.vue для каждого графика?
Спасибо