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

點擊下載TeeChart for JavaScript/HTML5最新試用版

The Legend

    顯示系列名稱和系列點的指標稱為圖例，可以使用多個屬性來自定義圖例行為和外觀。

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

    Legend位置和方向：

Chart1.legend.position = “left”;   
Chart1.legend.inverted = false;

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

• Chart1.legend.inverted（按正常順序繪制項目）

    選擇要在圖例中顯示的內容：

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

• Chart1.legend.legendStyle（自動，系列，值）

• Chart1.legend.textStyle（點值顯示為百分比，并指向文本標簽）

    字體和格式：

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

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

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

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

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

    項目頂部的標題文字：

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

    圖例項旁邊的符號：

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（每個項目文本都使用其點或系列顏色繪制）

• Chart1.dividing.fill（在圖例項之間繪制線條）

軸

    大多數系列數據都使用軸顯示，以便從數據值轉換為畫布像素坐標，但是像Pie和Donut這樣的系列不使用軸。

    圖表中有四個默認軸：左，上，右和下。

var a = Chart1.axes.left;

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

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

    系列也可以使用兩個軸顯示：

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

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

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

    默認情況下會自動控制秤，每個軸根據其關聯的系列值和視覺屬性計算其最小值和最大值。您可以覆蓋軸自動縮放并手動設置它們：

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

    上面的代碼相當于：

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

對數刻度

    軸標度默認為線性，log屬性會確定軸使用自然對數縮放而不是線性：

Chart1.axes.left.log = true;

軸標簽

    每個軸使用標簽格式化屬性（如font.size）會自動計算標簽的最佳距離，還可以控制自定義標簽更改軸增量屬性：

Chart1.axes.bottom.increment = 100;

    默認增量為零，表示自動計算。標簽可以顯示系列值或系列點標簽，這是使用labelStyle屬性控制的，選項包括：

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

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

    當系列包含日期時間值時，使用庫根據dateFormat屬性格式化標簽。

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

    控制標簽的其他屬性：

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

軸網格

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

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

 ;   當網格填充顏色不為空時，網格作為bands交替填充：

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

    網格線格式由筆觸屬性控制：

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

    默認網格線是實線，lineDash屬性顯示點劃線網格：

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

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

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

軸Ticks

    軸包含一個Ticks類型的innerTicks屬性，它具有stroke屬性。刻度線從標簽到軸線繪制，內部刻度從軸向內顯示。

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”;

軸標題

    靠近軸，title屬性用于顯示標識軸的文本：

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

軸定位

    軸的大小和位置默認是自動的。軸startPos和endPos屬性控制軸的像素坐標。

關注慧聚IT微信公眾號 ???，了解產品的最新動態及最新資訊。