Oberflächen Farbe
Verfasst: 23. Aug 2022 08:57
Hallo
Frage kann man bei diesen Code die Oberflächen Farbe anpassen in Prozent?
Also sowie hier
background: "linear-gradient(to top left, #6fa8dc 0%, #00FA9A 50%, #ffe74c 100%)"
Siehe dazu das Bild
Frage kann man bei diesen Code die Oberflächen Farbe anpassen in Prozent?
Code: Alles auswählen
uid: widget_with_chart_Denis
tags: []
props:
parameters:
- description: Title of the widget
label: Title
name: title
required: false
type: TEXT
- description: 1st gauge
label: Gauge 1 label
name: gauge1
required: false
type: TEXT
- description: 1st gauge MAX
label: Gauge 1 limit
name: gauge1max
required: false
type: TEXT
- description: 2nd gauge
label: Gauge 2 label
name: gauge2
required: false
type: TEXT
- description: 2nd gauge MAX
label: Gauge 2 limit
name: gauge2max
required: false
type: TEXT
- description: 1st chart
label: Chart label 1
name: chart1
required: false
type: TEXT
- description: 2nd chart
label: Chart label 2
name: chart2
required: false
type: TEXT
- description: Y-axis name
label: Y-axis label
name: axlabel
required: false
type: TEXT
- context: item
description: Item in gauge
label: Gauge 1 item
name: item1
required: false
type: TEXT
- context: item
description: Item in gauge
label: Gauge 2 item
name: item2
required: false
type: TEXT
- context: item
description: Item in chart
label: Chart item 1
name: item3
required: false
type: TEXT
- context: item
description: Item in chart
label: Chart item 2
name: item4
required: false
type: TEXT
parameterGroups: []
timestamp: Aug 21, 2022, 5:50:37 PM
component: f7-card
config:
title: =props.title
class:
- padding-bottom
style:
background-color: DarkKhaki
slots:
default:
- component: f7-row
config:
class:
- margin-top
slots:
default:
- component: f7-col
config:
width: 25
class:
- display-flex
- flex-direction-column
- align-content-space-around
slots:
default:
- component: oh-gauge
config:
type: semicircle
item: =props.item1
borderColor: green
min: 0
max: =props.gauge1max
valueTextColor: green
valueFontSize: 22
borderBgColor: gray
labelText: =props.gauge1
borderWidth: 25
class:
- margin-top
- margin-bottom
- component: oh-gauge
config:
type: semicircle
item: =props.item2
borderColor: red
min: 0
max: =props.gauge2max
valueTextColor: red
valueFontSize: 22
borderBgColor: gray
labelText: =props.gauge2
borderWidth: 25
class:
- margin-top
- margin-bottom
- component: f7-col
config:
width: 75
slots:
default:
- component: oh-chart
config:
chartType: ""
period: 12h
label: =props.chart1
slots:
grid:
- component: oh-chart-grid
config:
containLabel: false
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
name: Volt/Ampere/Watt
gridIndex: 0
min: 0
series:
- component: oh-time-series
config:
name: =props.chart1
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
color: green
item: =props.item3
- component: oh-time-series
config:
name: =props.chart2
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
color: red
item: =props.item4
tooltip:
- component: oh-chart-tooltip
config:
confine: true
smartFormatter: true
legend:
- component: oh-chart-legend
config:
bottom: 4
type: scroll
dataZoom:
- component: oh-chart-datazoom
config:
type: inside
Also sowie hier
background: "linear-gradient(to top left, #6fa8dc 0%, #00FA9A 50%, #ffe74c 100%)"
Siehe dazu das Bild