QChart + background image
I’m using QChart and QChartView to produce my 2D line graphs.
Now, I would like to create a 2D line chart that will contain a background image, like this example below: 
How can I do it using Qt? Is this possible?
@mrjj thank you a lot!
The original source-code of this old post was not working and it have a lot of warnings.
So I modified to get a complete and zero errors/warnings modern Qt example.
Here is the full source-code:
3 key points:
- In the UI file, you have to add a gridLayout to the MainWindow window.
- Add the charts in your *.pro file Qt += charts
- The background image must be in a Qt resource file
The final result is this chart + a backgroud image: 
I saw this Qt3DSurface that enable to put a texture in the plot area (link here).
I don’t know if it can be used in this case.
Anyone can confirm it?
I don’t know is is possible to generate a Qt3DSurface , rotate it to get a 2D plan (X and Y axis only) and:
- Plot a time series (like a QChart )
- Add a background "texture" with the desired image (like the first post above).
Is this possible?
Hi
Have a look here
https://forum.qt.io/topic/82640/center-background-image-in-qchart
(last post)
They used a brush to get a background picture. and transformed it to only be in the plot area.
Disclaimer. I have not tried it 🙂
@mrjj thank you a lot!
The original source-code of this old post was not working and it have a lot of warnings.
So I modified to get a complete and zero errors/warnings modern Qt example.
Here is the full source-code:
3 key points:
- In the UI file, you have to add a gridLayout to the MainWindow window.
- Add the charts in your *.pro file Qt += charts
- The background image must be in a Qt resource file
The final result is this chart + a backgroud image:
Qt QChart title background
Does somebody know how to make QChart look like on the image below?
I have created bar QBarChart and set its background color and color of the bar and removed axis numbers, but I don’t know how to set title of the chart to look like this.
How to make the background of the title to have different color and to take same width as the QChart?
1 Answer 1
I did as Spinkoo suggested.
Created QLabel in MainWindow constructor and created function which is used to position QLabel over QChart. That function must be called after the constructor of the MainWindow, because then all of the sizes and positions of the widgets and layouts are known. That function is called after the constructor of the MainWindow and each time when Resize event happens.
This is pretty much a workaround solution, probably there should be a way to create custom QChart class which will have the look as the chart from the question. So, if someone knows how to do that, I’d appreciate sharing.
Введение в работу с гистограммами в Qt
Гистограмма представляет данные в виде горизонтальных или вертикальных полос, сгруппированных по категориям. Рассмотрим, как с помощью гистограммы можно визуализировать данные в приложении, использующем фреймворк C++/Qt и его модуль Qt Charts.
Добавление модуля Qt Charts в проект
Во-первых, включаем использование модуля Qt Charts в qmake-файле проекта.
А в исходном файле используем следующие директивы include и using :
Создание гистограммы
Для простоты всё создание диаграммы выполним в конструкторе объекта класса, который наследуется от QMainWindow .
Данные, которые визуализирует гистограмма, определяются экземплярами класса QBarSet . Объект QBarSet представляет один набор полос на гистограмме.
Сначала мы создаем наборы и добавляем к ним данные. Данные добавляются с помощью оператора << . В качестве альтернативы можно использовать метод append() .
Затем создаем последовательность полос (объект класса QBarSeries ) и добавляем в нее наборы данных. Последовательность становится владельцем наборов полос. В последовательности данные из наборов группируются в категории. Первые значения каждого набора сгруппированы вместе в первой категории, вторые значения – во второй категории, и так далее.
Класс последовательности определяет способ представления данных:
- класс QBarSeries представляет данные в виде вертикальных полос;
- класс QHorizontalBarSeries представляет данные в виде горизонтальных полос.
В данном примере мы используем вертикальное представление.
Далее создаем объект диаграммы класса QChart и добавляем к нему последовательность полос. Устанавливаем заголовок для диаграммы с помощью метода setTitle() , а затем включаем анимацию последовательности полос, вызывая метод setAnimationOptions(QChart::SeriesAnimations) .
Чтобы на оси отображались категории, нам нужно создать объект QBarCategoryAxis . Здесь мы создаем ось категорий со списком категорий и устанавливаем ее выравнивание по нижнему краю, чтобы она действовала как ось x, и присоединяем ее к последовательности полос series . Диаграмма, объект chart , становится владельцем оси. Для оси y мы используем ось значений, выровненную по левому краю.
Мы также хотим показать легенду диаграммы. Для этого берем от диаграммы (объекта chart ) указатель на легенду (объект класса QLegend ) и делаем ее видимой. А затем помещаем легенду в правую часть диаграммы, задав для ее выравнивания значение Qt::AlignRight .
И, наконец, мы добавляем диаграмму в представление. И включаем сглаживание для chartView .
Теперь диаграмма готова к показу. Мы устанавливаем диаграмму как центральный виджет окна. И изменяем размеры окна.
В результате получаем гистограмму следующего вида:
Рисунок 1 – Приложение с примером гистограммы Qt Charts
Изменение внешнего вида гистограммы
Можно заметить, что цвета полос, начиная с шестой (Уральский федеральный округ), начинают повторяться, причем с пониженной яркостью.
Чтобы решить эту проблему, можно вручную установить цвет для определенного набора полос (объекта QBarSet ) с помощью метода QBarSet::setLabelBrush(const QBrush &brush) . Для примера немного упростим задачу и извлечем список наборов полос из объекта последовательности полос и каждому набору установим «случайный» цвет.
В итоге получаем следующую гистограмму:
Рисунок 2 – Изменение цвета полос гистограммы Qt Charts