Ana içeriğe geç

Çubuk Grafik

BarChart widget'ı verileri görsel olarak çubuk grafik biçiminde görüntüler. Veriler, veri modelinden alınır; çubuk tanımları verilerin grafik öğeleriyle nasıl eşleneceğini belirtir.

Çubuk Tanımları

Bir ç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 çubuğa statik etiket göstermek için istediğiniz etiket metnini LabelXPath özelliğinde tek tırnak içine alın. Örneğin, bir çubuğu "Satışlar" olarak etiketlemek için LabelXPath değerini 'Sales'.

Bu YAxisValueFormat özellik, 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 grafiğin görüntülenen boyutlarını denetler, Title/Content grafik başlığını sağlar.
  • YAxisValueFormat değer ekseninin Numeric veya Date biçimlendirmesini seçer. YAxisLabel/Content ve XAxisLabel/Content eksen açıklamalarını sağlar.
  • Her Bars/Bar bir çubuk serisini tanımlar. XPath kaynak koleksiyonunu, DataXPath bu koleksiyondaki satırları seçer (* doğrudan alt öğeleri seçer).
  • Bir çubuk içinde ValueXPath sayısal değeri, LabelXPath görüntüleme etiketini ve CategoryXPath değerini sağlar. group/category. içindeki tırnaklı bir değer, örneğin LabelXPathgibi bir değer 'Sales'statik etikettir.

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 modelini ele alalı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ğeriyle belirlendiği ve ürün Namebilgisiyle etiketlenip Category.

grafik