Ana içeriğe geç

Çubuk Grafik

BarChart bileşeni verileri çubuk grafik olarak görsel biçimde gösterir. Veriler veri modelinden alınır; çubuk tanımları, verilerin grafik öğeleriyle nasıl eşleştirileceğini belirtir.

Çubuk Tanımları

Çubuk tanımı, grafikteki tek bir çubuğu belirtir. XPath özelliğiyle eşleşen her veri öğesi için yeni bir çubuk oluşturulur. Çubuğun değeri ValueXPathile, etiketi ise LabelXPath.

Bir çubuk için statik etiket görüntülemek üzere istediğiniz etiket metnini LabelXPath özelliğinin içinde tek tırnak işaretleri arasına alın. Örneğin, bir çubuğu "Satış" olarak etiketlemek için LabelXPath olarak ayarlayın. 'Sales'.

YAxisValueFormat özelliği, Y ekseni değerlerinin biçimini 'Numeric' veya 'Date' olarak tanımlar.

XML Alanları

  • XPath Grafik için form verisi bağlamını oluşturur. Width ve Height oluşturulan grafiğin boyutlarını denetler; Title/Content grafik başlığını sağlar.
  • YAxisValueFormat Değer ekseninin biçimlendirmesi olarak Numeric veya Date seçer. YAxisLabel/Content ve XAxisLabel/Content eksen başlıklarını sağlar.
  • Her Bars/Bar bir çubuk serisini tanımlar. XPath kaynak koleksiyonunu, DataXPath ise bu koleksiyondaki satırları seçer (* doğrudan alt öğeleri seçer).
  • Bir çubukta ValueXPath sayısal değeri, LabelXPath görüntüleme etiketini, CategoryXPath ise group/category. içindeki tırnaklı bir değer, örneğin LabelXPathstatik bir etikettir. 'Sales'

BarChart, verileri oluşturmak için yapılandırılan yolları okur; grafik değerlerini form modeline geri yazmaz.

Örnek

Satış verilerini temsil eden bir veri modeli olduğunu varsayalım:

 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
<Lines>
    <Line>
        <Count>5</Count>
        <Name>Apple</Name>
        <Category>Store</Category>
    </Line>
    <Line>
        <Count>5</Count>
        <Name>Apple</Name>
        <Category>WebSite</Category>
    </Line>
    <Line>
        <Count>2</Count>
        <Name>T-Shirt</Name>
        <Category>WebSite</Category>
    </Line>
    <Line>
        <Count>2</Count>
        <Name>T-Shirt</Name>
        <Category>Store</Category>
    </Line>
    <Line>
        <Count>1</Count>
        <Name>Pants</Name>
        <Category>Store</Category>
    </Line>
    <Line>
        <Count>1</Count>
        <Name>Pants</Name>
        <Category>WebSite</Category>
    </Line>
</Lines>

Aşağıdaki BarChart yapılandırması bu verileri görüntüler:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<BarChart Width="" Height="" XPath="">
    <Title>
        <Content><![CDATA[]]></Content>
    </Title>
    <YAxisValueFormat>Numeric</YAxisValueFormat>
    <YAxisLabel>
        <Content><![CDATA[Sales]]></Content>
    </YAxisLabel>
    <XAxisLabel>
        <Content><![CDATA[Count]]></Content>
    </XAxisLabel>
    <Bars>
        <Bar>
            <XPath><![CDATA[Lines]]></XPath>
            <DataXPath><![CDATA[*]]></DataXPath>
            <ValueXPath><![CDATA[Count]]></ValueXPath>
            <LabelXPath><![CDATA[Name]]></LabelXPath>
            <CategoryXPath><![CDATA[Category]]></CategoryXPath>
        </Bar>
    </Bars>
</BarChart>

Bu yapılandırma, her çubuğun bir ürünü temsil ettiği, yüksekliğinin Count değerine göre belirlendiği ve ürün Nameetiketiyle gösterilip Category.

grafik