QChart笔记7：基于QPolarChart的雷达图、能力图、六边形图示例

一. 概述

六边形战士这个词经常听说，用来描述这个词的是六边形雷达图/能力图。在网上搜索如何用QChart实现没有找到，于是就自己研究出一种写法。

先看看效果：

可以用这个图表示游戏中的人物属性，看看我的几个不太厉害的NPC。

二. 内容

在QT自带的实例中QPolarChart的显示如下：

为了改成能力图的样式，需要解决如下问题：

1. 角度坐标变成汉字

使用QCategoryAxis可以设置汉字。

2. 半径值隐藏

将显示格式设置为空格可以隐藏值。

radialAxis->setLabelFormat(" ");

3. 背景圆环隐藏，改为六边形背景

这个命令可以隐藏圆环：

chart->axes(QPolarChart::PolarOrientationRadial).at(0)->setVisible(false); 

如果要隐藏半径线，则是：

chart->axes(QPolarChart::PolarOrientationAngular).at(0)->setVisible(false);

背景六边形则是由多条series线组成，并设置成相应的颜色。

具体代码如下：

#include <QApplication>
#include <QDebug>
#include <QtCharts/QLineSeries>
#include <QtCharts/QPolarChart>
#include <QtCharts/QValueAxis>
#include <QtCharts/QChartView>
#include <QCategoryAxis>
#include <QAreaSeries>
#include <QLegendMarker>

QT_CHARTS_USE_NAMESPACE

void Hexagon()
{
    const qreal angularMin = 0;
    const qreal angularMax = 360;
    const qreal radialMin = 0;
    const qreal radialMax = 360;


    qreal ad6 = (angularMax - angularMin) / 6;

    QLineSeries *seriesdata = new QLineSeries();
    seriesdata->append(angularMin, 143);
    seriesdata->append(angularMin + ad6*1, 10);
    seriesdata->append(angularMin + ad6*2, 134);
    seriesdata->append(angularMin + ad6*3, 24);
    seriesdata->append(angularMin + ad6*4, 1);
    seriesdata->append(angularMin + ad6*5, 126);
    seriesdata->append(angularMin + ad6*6, 143);
    {
        //设置线上的标签可见
        seriesdata->setPointLabelsFormat("@yPoint");
        seriesdata->setPointLabelsClipping(false);
        seriesdata->setPointLabelsVisible(true);
    }



    QAreaSeries *seriesArea = new QAreaSeries();
    seriesArea->setName("弥娜");
    seriesArea->setUpperSeries(seriesdata);
    seriesArea->setOpacity(0.5);

    QPolarChart *chart = new QPolarChart();




    chart->addSeries(seriesdata);
    chart->addSeries(seriesArea);

    QCategoryAxis *angularAxis = new QCategoryAxis();
    angularAxis->append("单手", 0);
    angularAxis->append("双手", 60);
    angularAxis->append("长杆", 120);
    angularAxis->append("弓", 180);
    angularAxis->append("弩", 240);
    angularAxis->append("投掷", 300);
    angularAxis->setLabelsPosition(QCategoryAxis::AxisLabelsPositionOnValue);

    angularAxis->setShadesBrush(QBrush(QColor(249, 249, 255)));
    chart->addAxis(angularAxis, QPolarChart::PolarOrientationAngular);
    QValueAxis *radialAxis = new QValueAxis();

    radialAxis->setLabelFormat(" ");
    chart->addAxis(radialAxis, QPolarChart::PolarOrientationRadial);

    angularAxis->setLineVisible(false);
    //chart->axes(QPolarChart::PolarOrientationAngular).at(0)->setVisible(false);  //隐藏半径线
    chart->axes(QPolarChart::PolarOrientationRadial).at(0)->setVisible(false);     //隐藏背景圆圈步骤2
    seriesArea->attachAxis(radialAxis);
    seriesArea->attachAxis(angularAxis);
    for (int i=0; i<=4; ++i)
    {
        QLineSeries *seriesLineTemp = new QLineSeries();
        chart->addSeries(seriesLineTemp);
        seriesLineTemp->attachAxis(radialAxis);
        seriesLineTemp->attachAxis(angularAxis);
        seriesLineTemp->setColor(QColor(214, 214, 214));
        int interval = 70;
        seriesLineTemp->append(angularMin, radialMax-10 - interval*i);
        seriesLineTemp->append(angularMin + ad6*1, radialMax-10-interval*i);
        seriesLineTemp->append(angularMin + ad6*2, radialMax-10-interval*i);
        seriesLineTemp->append(angularMin + ad6*3, radialMax-10-interval*i);
        seriesLineTemp->append(angularMin + ad6*4, radialMax-10-interval*i);
        seriesLineTemp->append(angularMin + ad6*5, radialMax-10-interval*i);
        seriesLineTemp->append(angularMin + ad6*6, radialMax-10-interval*i);
    }

    chart->legend()->markers(seriesdata).at(0)->setVisible(false);

    foreach (QLegendMarker* marker, chart->legend()->markers())
    {
        if(marker->type() != QLegendMarker::LegendMarkerTypeArea)
        {
           marker->setVisible(false);
        }
    }


    radialAxis->setRange(radialMin, radialMax);
    angularAxis->setRange(angularMin, angularMax);
    QChartView *chartView = new QChartView();
    chartView->setChart(chart);
    chartView->setRenderHint(QPainter::Antialiasing);
    chartView->show();
}


int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    Hexagon();

    return a.exec();
}

三. 结语

同理，可以实现五边形或者其他边形，跟Widget结合后可以动态输入值等。这里作为探索只是完成核心功能。

稀有原创内容，欢迎点赞。