Draw chart with "tolerance area" and different colored trend-line inside or outside of this area
-
Hello,
I'm quite new to Qt and QML. I need to draw a chart with a horizontal area drawn in a different color. The trend line I draw should have different colors inside and outside of this "tolerance" area.
Now my questions:
- So far I have drawn the horizontal area (tolerance area) with an AreaSeries (look at the source code below). Is there a better way to do this?
- I couldn't find a possibility to give my trend line (LineSeries) different colors inside and outside of this horizontal area. How can I do this? It just occured to me, that I could do it with different LineSeries, but this would need a lot of calculating. Is there a better solution?
- On the y axis I want to print the value next to the reference line bold or in a bigger font. Can I do this just for one label of the axis?
Here is my actual source code:
import QtQuick 2.3
import QtQuick.Window 2.2
import QtCharts 2.0Window {
visible: true
width: 720
height: 720// Pick Count ChartView { backgroundColor: "lightgrey" height: parent.height; width: parent.width dropShadowEnabled: true legend.visible: false title: qsTr("Pick count") ValueAxis { id: axisX color: "black" min: -100.0 max: 0.0 tickCount: 11 titleText: "m" } ValueAxis { id: axisY color: "black" min: 14.0 max: 22.0 tickCount: 5 titleText: "F/cm" } // Trend line LineSeries { axisX: axisX axisY: axisY XYPoint { x: 0.0; y: 17.0} XYPoint { x: -10.0; y: 17.5} XYPoint { x: -20.0; y: 15.9} XYPoint { x: -30.0; y: 16.0} XYPoint { x: -40.0; y: 16.3} XYPoint { x: -50.0; y: 16.4} XYPoint { x: -60.0; y: 17.2} XYPoint { x: -70.0; y: 17.0} XYPoint { x: -80.0; y: 18.3} XYPoint { x: -90.0; y: 18.0} XYPoint { x: -100.0; y: 19.0} } // Tolerance area AreaSeries { axisX: axisX axisY: axisY borderColor: "transparent" borderWidth: 0.0 opacity: 0.4 lowerSeries: LineSeries { XYPoint { x: 0.0; y: 17.0} XYPoint { x: -99.9; y: 17.0} } upperSeries: LineSeries { XYPoint { x: 0.0; y: 19.0} XYPoint { x: -99.9; y: 19.0} } } // Reference line LineSeries { axisX: axisX axisY: axisY XYPoint { x: 0.0; y: 18.0} XYPoint { x: -100.0; y: 18.0} } }
}
Any help is highly appreciated!
Christine