我正在使用Highcharts和Vue.js，并且在我的页面上有多个图表。现在，我可以在每个图表上显示数据，而不会出现任何问题。但是，我想为特定图形设置（例如）特殊标题。
我有以下文件：
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，将系列的请求发送到我的数据库，然后将其返回以便在特定图表上显示。
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（仅此图表的特定标题），然后在Stockchart.vue中尝试检索该值，但这不起作用。有人有主意，为什么？
我需要为每个图表创建并使用特定的Stockchart.vue吗？
谢谢
是否有不使用计算属性的原因？我在父级组件中定义了一个静态数据，将这些选项传递给子级props，然后每隔一秒钟更改一次myTitel属性（在此稍作改动，此属性实际上应称为myTitle）。看起来一切正常。
实时示例：https://codesandbox.io/s/highcharts-vue-demo-7xxg2?file=/src/App.vue