TeeChart for JavaScript/HTML5是一個(gè)100%的 JavaScript/ HTML5圖表庫，可以在所有兼容的瀏覽器中以原生的Javascript格式使用HTML5 Canvas繪制圖表。 

點(diǎn)擊下載TeeChart for JavaScript/HTML5最新試用版

The Legend

    顯示系列名稱和系列點(diǎn)的指標(biāo)稱為圖例，可以使用多個(gè)屬性來自定義圖例行為和外觀。

Chart1.legend.visible = true;
Chart1.legend.transparent = false;
Chart1.legend.format.fill = “yellow”;

    Legend位置和方向：

Chart1.legend.position = “l(fā)eft”;   
Chart1.legend.inverted = false;

• Chart1.legend.position(“top”,“bottom”,“right”)

• Chart1.legend.inverted（按正常順序繪制項(xiàng)目）

    選擇要在圖例中顯示的內(nèi)容：

Chart1.legend.legendStyle = “values”;    // “auto”, “series”, “values”
Chart1.legend.textStyle = “percentlabel”;

• Chart1.legend.legendStyle（自動(dòng)，系列，值）

• Chart1.legend.textStyle（點(diǎn)值顯示為百分比，并指向文本標(biāo)簽）

    字體和格式：

Chart1.legend.format.font.style = “20px Arial”;

    圖表頂部和圖表軸的邊距：

Chart1.legend.align = 0;  
Chart1.legend.padding = 5;

• Chart1.legend.align（距圖表邊緣的距離，百分比從0到100，0表示自動(dòng)）

• Chart1.legend.padding（從圖例到軸的距離）

    項(xiàng)目頂部的標(biāo)題文字：

Chart1.legend.title.text = “My Legend”;
Chart1.legend.title.visible = true;

    圖例項(xiàng)旁邊的符號(hào)：

Chart1.legend.symbol.visible = true;
Chart1.legend.symbol.width = 20;
Chart1.legend.symbol.format.shadow.width = 5

    其他Legend屬性：

Chart1.legend.fontColor = true;   // each item text is painted using its point or series color
Chart1.dividing.fill = “blue”;    // draws lines between legend items

• Chart1.legend.fontColor（每個(gè)項(xiàng)目文本都使用其點(diǎn)或系列顏色繪制）

• Chart1.dividing.fill（在圖例項(xiàng)之間繪制線條）

軸

    大多數(shù)系列數(shù)據(jù)都使用軸顯示，以便從數(shù)據(jù)值轉(zhuǎn)換為畫布像素坐標(biāo)，但是像Pie和Donut這樣的系列不使用軸。

    圖表中有四個(gè)默認(rèn)軸：左，上，右和下。

var a = Chart1.axes.left;

    每個(gè)系列都有兩個(gè)屬性，用于控制使用哪些水平軸和垂直軸，默認(rèn)情況下，水平軸為底部，垂直軸為左。 

Chart1.series.items[0].horizAxis = “top”;
Chart1.getSeries(1).vertAxis = “right”;

    系列也可以使用兩個(gè)軸顯示：

Chart1.series.items[2].horizAxis = “both”;

    軸的可見性由Chart1.axes.visible屬性全局控制，并使用可見軸單獨(dú)控制：

Chart1.axes.visible = true;
Chart1.axes.bottom.visible = true;

    默認(rèn)情況下會(huì)自動(dòng)控制秤，每個(gè)軸根據(jù)其關(guān)聯(lián)的系列值和視覺屬性計(jì)算其最小值和最大值。您可以覆蓋軸自動(dòng)縮放并手動(dòng)設(shè)置它們：

var a = Chart1.axes.left;
a.automatic = false;
a.minimum = 50;
a.maximum = 200;

    上面的代碼相當(dāng)于：

Chart1.axes.left.setMinMax( 50, 200 );

對(duì)數(shù)刻度

    軸標(biāo)度默認(rèn)為線性，log屬性會(huì)確定軸使用自然對(duì)數(shù)縮放而不是線性：

Chart1.axes.left.log = true;

軸標(biāo)簽

    每個(gè)軸使用標(biāo)簽格式化屬性（如font.size）會(huì)自動(dòng)計(jì)算標(biāo)簽的最佳距離，還可以控制自定義標(biāo)簽更改軸增量屬性：

Chart1.axes.bottom.increment = 100;

    默認(rèn)增量為零，表示自動(dòng)計(jì)算。標(biāo)簽可以顯示系列值或系列點(diǎn)標(biāo)簽，這是使用labelStyle屬性控制的，選項(xiàng)包括：

Chart1.axes.left.labels.labelStyle = “text”;

• 還有auto、none、value、mark、text 和 x

    當(dāng)系列包含日期時(shí)間值時(shí)，使用庫根據(jù)dateFormat屬性格式化標(biāo)簽。

Chart1.series.items[0].data.x = [ new Date() ];
Chart1.axes.bottom.labels.dateFormat = “shortDate”;

    控制標(biāo)簽的其他屬性：

Chart1.axes.left.labels.alternate = true;  // double quantity of labels
Chart1.axes.right.labels.visible = false;  // show or hide labels
Chart1.axes.left.labels.decimals = 3;    // output numbers with up to 3 fixed decimals
Chart1.axes.bottom.labels.rotation = 90;    // 90 degree rotation

軸網(wǎng)格

    軸網(wǎng)格屬性包括用于繪制跨越圖表軸空間的網(wǎng)格線的格式。

Chart1.axes.left.grid.visible = true;

 ;   當(dāng)網(wǎng)格填充顏色不為空時(shí)，網(wǎng)格作為bands交替填充：

Chart1.axes.left.grid.format.fill = “red”;

    網(wǎng)格線格式由筆觸屬性控制：

Chart1.axes.left.grid.format.stroke.size = 5;

    默認(rèn)網(wǎng)格線是實(shí)線，lineDash屬性顯示點(diǎn)劃線網(wǎng)格：

Chart1.axes.left.grid.lineDash = true;

    在本機(jī)支持畫布劃線筆劃的瀏覽器上，上述代碼等效于：

Chart1.axes.left.grid.format.stroke.dash = [10,5];

軸Ticks

    軸包含一個(gè)Ticks類型的innerTicks屬性，它具有stroke屬性。刻度線從標(biāo)簽到軸線繪制，內(nèi)部刻度從軸向內(nèi)顯示。

Chart1.axes.bottom.innerTicks.visible = true;
Chart1.axes.left.ticks.length = 9;
Chart1.axes.top.ticks.stroke.fill = “blue”;

MinorTicks

    從tick到tick，minorTicks axis屬性可用于顯示小的子刻度：

Chart1.axes.left.minorTicks.visible = true;
Chart1.axes.left.minorTicks.length = 2;
Chart1.axes.left.minorTicks.count = 5;
Chart1.axes.left.minorTicks.stroke.fill = “green”;

軸標(biāo)題

    靠近軸，title屬性用于顯示標(biāo)識(shí)軸的文本：

Chart1.axes.bottom.title.text = “Quantity”;
Chart1.axes.bottom.title.text.format.font.fill = “red”;

軸定位

    軸的大小和位置默認(rèn)是自動(dòng)的。軸startPos和endPos屬性控制軸的像素坐標(biāo)。

關(guān)注慧聚IT微信公眾號(hào) ???，了解產(chǎn)品的最新動(dòng)態(tài)及最新資訊。