zoukankan      html  css  js  c++  java
  • (五)如何自定义ChartDirector的数据点标签

    为图表上的数据点加上标签,可以起到注释的作用,能提高图表的可读性。本示例就为你演示如何在Web图表控件ChartDirector绘制的散点图上加上自定义标签。

    主要有以下几个步骤:

    • 本例中的红色玻璃球来自一个散射层,由 XYChart.addScatterLayer创建
    • 自定义标签放在一个数组变量中,用Layer.addExtraField将标签作为图表的附加字段
    • Layer.setDataLabelFormat设置数据标签格式,并显示附加字段
    • 用Layer.setDataLabelStyle将数据标签的字体设置为8磅大小的Arial Bold字体
    • Layer.setDataLabelStyle返回一个TextBox对象,表示数据标签的原型。在本例中,TextBox对象用于自定义数据标签的背景颜色、3D边框、位置移动和对齐

    散点图上的数据点标签:

    在ChartDirector图表上自定义数据点标签源代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    #include "chartdir.h"
     
    int main(int argc, char *argv[])
    {
        // The XY points for the scatter chart
        double dataX[] = {150, 400, 300, 1500, 800};
        double dataY[] = {0.6, 8, 5.4, 2, 4};
     
        // The labels for the points
        const char *labels[] = {"Nano\n100", "SpeedTron\n200 Lite", "SpeedTron\n200",
            "Marathon\nExtra", "Marathon\n2000"};
     
        // Create a XYChart object of size 450 x 400 pixels
        XYChart *c = new XYChart(450, 400);
     
        // Set the plotarea at (55, 40) and of size 350 x 300 pixels, with a light grey
        // border (0xc0c0c0). Turn on both horizontal and vertical grid lines with light
        // grey color (0xc0c0c0)
        c->setPlotArea(55, 40, 350, 300, 0xffffff, -1, 0xc0c0c0, 0xc0c0c0, -1);
     
        // Add a title to the chart using 18 pts Times Bold Itatic font.
        c->addTitle("Product Comparison Chart", "timesbi.ttf", 18);
     
        // Add a title to the y axis using 12 pts Arial Bold Italic font
        c->yAxis()->setTitle("Capacity (tons)", "arialbi.ttf", 12);
     
        // Add a title to the x axis using 12 pts Arial Bold Italic font
        c->xAxis()->setTitle("Range (miles)", "arialbi.ttf", 12);
     
        // Set the axes line width to 3 pixels
        c->xAxis()->setWidth(3);
        c->yAxis()->setWidth(3);
     
        // Add the data as a scatter chart layer, using a 15 pixel circle as the symbol
        ScatterLayer *layer = c->addScatterLayer(DoubleArray(dataX, (int)(sizeof(dataX) /
            sizeof(dataX[0]))), DoubleArray(dataY, (int)(sizeof(dataY) / sizeof(dataY[0])
            )), "", Chart::GlassSphereShape, 15, 0xff3333, 0xff3333);
     
        // Add labels to the chart as an extra field
        layer->addExtraField(StringArray(labels, (int)(sizeof(labels) / sizeof(labels[0])
            )));
     
        // Set the data label format to display the extra field
        layer->setDataLabelFormat("{field0}");
     
        // Use 8pts Arial Bold to display the labels
        TextBox *textbox = layer->setDataLabelStyle("arialbd.ttf", 8);
     
        // Set the background to purple with a 1 pixel 3D border
        textbox->setBackground(0xcc99ff, Chart::Transparent, 1);
     
        // Put the text box 4 pixels to the right of the data point
        textbox->setAlignment(Chart::Left);
        textbox->setPos(4, 0);
     
        // Output the chart
        c->makeChart("scatterlabels.png");
     
        //free up resources
        delete c;
        return 0;
    }

    Chartdirector下载

    欢迎加群交流控件经验:301644590
  • 相关阅读:
    nodejs sequelize 对应数据库操作符的定义
    nodejs利用sequelize-auto 根据数据库的table 生成model
    微信小程序: rpx与px,rem相互转换
    vue 父组件通过props向子组件传递数据/方法的方式
    小程序-wepy学习
    [考试反思]1026csp-s模拟测试88:发展
    [考试反思]1025csp-s模拟测试87:生存
    [考试反思]1024csp-s模拟测试86:消耗
    [考试反思]1024csp-s模拟测试85:以为
    [考试反思]1023csp-s模拟测试84:精妙
  • 原文地址:https://www.cnblogs.com/flashcharts/p/2975402.html
Copyright © 2011-2022 走看看