Chart

背景通常可视化地图我们使用geojson数据+(echarts/highchart等)制作,经常我们业务需要的地图没有合适geojson数据,原因大致如下: 《测绘法》图表地图通常是简易版地图,很难与真实地图一致,导致结果:正规网站不能提供下载第三方能下载到的矢量地图数据只能到国级省级县区级别的行政划分变动频繁(比如前两年的杭州地图不包括临安)地图区域划分可能不同于行政划分思路本文给出的是本人独家解决方法是通过AI制作地图数据,以真实地图或者草图为底,秒出边界和中心,导出svg,通过正则(下面提供一个gulp插件转)转为geojson数据; 为什么使用AI有图层有组合有钢笔制作准确省事有前进有后退不怕出错出了制作地图geojson数据,还可以利用生产svg做各种吊炸天效果(比如3D地图晒个demo)本人美工大佬,精通PS AE AI等等;秀张鼠绘 案例使用方法1.下载git clone https://github.com/yuhonyon/svg2geojson.git2.安装npm i3.使用将 svg 文件直接放在 svg/ 目录下输入命令gulp在 dist/ 目录下将生产对应的目录,目录下有转换后的 geojson 文件以及行政中心的坐标文件和 svg 原文件 教学制作地图 geojson 数据的所有步骤设计地图草稿根据设计稿使用 ai 画矢量地图导出 svg使用 gulp 将 svg 转换为 geojson使用图表库制作地图设计地图草稿设计师设计地图草稿(只需明确行政划分区域即可),如下图 使用 AI 描出矢量图将设计草稿导入 AI新建图层,在图层内跟据设计稿使用钢笔工具描出一个行政区的行政(使用多边形描边)将该图层取名为行政区名字重复第 2 步,描出所有行政区 选择所有描点,转换尖角,去除不小心画出的曲线(导出的 svg 不是由 polygon 组成的而是 path 的时候使用这个方法,建议描完后就使用一次)在每个图层中心处再画一个圆形或者椭圆删除设计草稿的图层导出 svg，没有出错的话格式应该如下如果发现 poluygon 标签变成了 path,请注意第 4 步骤** 注意:导出的 svg 转换出的 geojson 制作的地图将会是垂直颠倒的(可能是坐标轴不一样,一个左上角一个右下角),所以我们要把我们制作的 AI 图垂直翻转后再导出 svg ** 将 svg 转换为 geojson效果

这篇文章主要讲解QAbstractSeries的API及其使用。0x00 写在前面：Qt Charts的组成结构 理解本文章内容之前，需要读者对Qt Charts的基本组成有个整体认识，具体可以参考这篇文章:Qt Charts 基本组成。Qt Charts主要由QChartView、QChart、QLegend图例、坐标轴(由QAbstractAxis子类实现)、数据源(由QAbstractSeries子类实现)等组成：0x01 QAbstractSeries类 由上图可知，Qt Charts图表中，数据的最终呈现主要由QAbstractSeries及其派生类负责(上图为QLineSeries)，通常在实际开发中都是直接使用QAbstractSeries的派生类来实现功能。QAbstractSeries作为Qt Charts模块中所有数据序列类(Q*Series)的基类，与其子类的继承关系大致如下：Tips：由于QAbstractSeries的子类及其子类的子类数目众多，这里只大致列出了从QAbstractSeries<–QXYSeries<–QLineSeries的继承关系，详情可以参考上文提到的文章链接以及Qt官方文档。可以看到，以QLineSeries为例，QLineSeries继承自QXYSeries，而QXYSeries正是继承自QAbstractSeries类，同时通过学习QLineSeries相关文档和源码了解到，QLineSeries的功能实现几乎都继承于其父类QXYSeries和QAbstractSeries类，因此。要想熟练使用QLineSeries，实现美丽的折线图，学习理解QXYSeries和QAbstractSeries类的API是必须的，本文主要介绍QAbstractSeries。0x02 QAbstractSeries属性QString name;获取和设置series名称，即QAbstractSeries所表示的图形图例名称，支持HTML格式的文本。QString name() const;获取series图例名称。void setName(const QString &name);设置series图例名称。当图例名称发生改变时，会触发QAbstractSeries的nameChanged()信号。bool useOpenGL;获取和设置series是否开启OpenGL加速。bool useOpenGL() const;获取是否开启OpenGL加速。void setUseOpenGL(bool enable=true);设置开启/关闭OpenGL加速渲染，默认关闭。该选项发生改变时会触发QAbstractSeries的useOpenGLChanged()信号。Tips : 在不开启OpenGL加速就能满足性能要求且对该选项带来的副作用不熟悉的情况下，建议不要开启OpenGL加速！当需要绘制大数据量的图表序列时，开启OpenGL加速之后series的绘制性能显著提升。但是Qt Charts实现的OpenGL加速(依托QOpenGLWidget组件实现)迄今为止仍存在一些问题，比如MDI程序环境下，开启了OpenGL加速的图表序列会被置顶于所有MDI子窗口之上，造成图表重叠错乱的问题：而且，目前只有QLineSeries和QScatterSeries两种类型的图表支持开启OpenGL绘制，且当QLineSeries作为面积图QAreaSeries的边缘线时也不能开启OpenGL。因此，慎重开启此选项！qreal opacity;获取和设置图表序列显示的透明度。qreal opacity() const;获取series当前设置的透明度。void setOpacity(qreal opacity);设置series显示的透明度，设置范围：全透明0.0~1.0不透明，该属性值发生改变时会触发opacityChanged()信号。bool visible;获取和设置是否显示当前图表。bool isVisible() const;获取是否显示当前图表；void setVisible(bool visible = true);设置是否显示当前图表，该属性值发生改变时会触发visibleChanged()信号。const SeriesType type;该属性代表当前图表序列series的类型，QAbstractSeries中声明了一个纯虚函数用于操作该属性：virtual QAbstractSeries::SeriesType type() const = 0;QAbstractSeries的子类需要手动实现该函数并返回对应的图表类型。SeriesType是一个枚举类，描述了Qt Charts当前支持的图表类型：0x03 QAbstractSeries公有方法QAbstractSeries主要的公有方法有：bool QAbstractSeries::attachAxis(QAbstractAxis *axis);附加坐标轴到图表序列series，附加成功时返回true，否则返回false: // 创建横、纵坐标轴 QValueAxis *axisX = new QValueAxis; QValueAxis *axisY = new QValueAxis; // 设置坐标轴颜色 axisX->setLinePen(QPen(Qt::blue)); axisY->setLinePen(QPen(Qt::blue)); // 设置坐标轴刻度线颜色和宽度 QPen pen(Qt::black); pen.setWidth(1); axisX->setGridLinePen(pen); axisY->setGridLinePen(pen); // 添加坐标轴到QChart组件 chart->addAxis(axisX,Qt::AlignBottom); chart->addAxis(axisY,Qt::AlignLeft); // 设置显示刻度范围 axisX->setRange(0,25); axisY->setRange(0,15); // 附加坐标系到图表序列series series->attachAxis(axisX); series->attachAxis(axisY); 效果：当同一方向上有多个坐标轴同时依附到同一个图表序列上时，这些坐标轴将会被设置为相同的刻度范围，且经过实践证明，自动调整后的刻度范围是最后被依附到图标序列的坐标轴刻度范围： //增加第二条个横纵坐标系 QValueAxis *axisX1 = new QValueAxis; QValueAxis *axisY1 = new QValueAxis; axisX1->setRange(-5,15); axisY1->setRange(0,5); chart->addAxis(axisX1,Qt::AlignBottom); chart->addAxis(axisY1,Qt::AlignLeft); //将两个坐标系依附到图标序列series series->attachAxis(axisX1); series->attachAxis(axisY1); 效果：QList<QAbstractAxis *> QAbstractSeries::attachedAxes();获取图表序列当前依附的所有坐标轴集合： // 打印上一步中依附到series的所有坐标轴集合 qDebug() << “attached axes:” << series->attachedAxes(); 结果：QChart *QAbstractSeries::chart() const;获取当前图表序列series所属的QChart组件。通过QChart::addSeries()方法将series添加到QChart组件后可以通过此方法获取series被添加到的QChart对象指针。bool QAbstractSeries::detachAxis(QAbstractAxis *axis);从当前图表序列分离坐标轴。0x04 The End. ...