GoJS是一款功能強(qiáng)大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新版

功能外觀屬性

還有一些功能屬性，可以進(jìn)一步自定義刻度線和標(biāo)簽的外觀。

• Shape.graduatedSkip / TextBlock.graduatedSkip- 一個可選函數(shù)，對于繪制特定刻度或標(biāo)簽時應(yīng)跳過的值返回true
• TextBlock.graduatedFunction- 一個可選函數(shù)，該函數(shù)將值轉(zhuǎn)換為要以該值顯示的字符串-如果未定義，則默認(rèn)值將四舍五入到最多兩位小數(shù)

  diagram.add(
    $(go.Part, "Graduated",
      $(go.Shape, { geometryString: "M0 0 H400" }),
      $(go.Shape,
        { // skip drawing tick at 30
          graduatedSkip: function (v) { return v === 30; },
          geometryString: "M0 0 V10"
        }
      ),
      $(go.TextBlock, { segmentOffset: new go.Point(0, 12) })
    ));

  diagram.add(
    $(go.Part, "Graduated",
      $(go.Shape, { geometryString: "M0 0 H400" }),
      $(go.Shape, { geometryString: "M0 0 V10" }),
      $(go.TextBlock,
        { // always display two decimals
          graduatedFunction: function(val) { return val.toFixed(2); },
          segmentOffset: new go.Point(0, 12)
        }
      )
	

		 ));
	

有一些方法可用于計算漸變路徑上的點：

• Panel.graduatedPointForValue- 以Panel坐標(biāo)中的gradedMin和gradedMax之間的某個值返回沿著主形狀的Point
• Panel.graduatedValueForPoint- 返回最接近給定Point的主形狀上的值

var gauge =
  $(go.Part, "Auto",
    { location: new go.Point(10, 20) },
    $(go.Shape, { fill: "white" }),
    $(go.Panel, "Graduated",
      { name: "SCALE", margin: 10 },
      $(go.Shape, { name: "PATH", geometryString: "M0 0 A120 120 0 0 1 200 0" }),
      $(go.Shape, { geometryString: "M0 0 V10" }),
      $(go.TextBlock,
        { segmentOffset: new go.Point(0, 12), segmentOrientation: go.Link.OrientAlong })
    )
  );
diagram.add(gauge);

var marker =
  $(go.Part, "Spot",
    { locationSpot: go.Spot.Center, selectionAdorned: false },
    $(go.Shape, "Circle", { fill: "transparent", strokeWidth: 0, cursor: "pointer" }),
    $(go.Shape, "Circle", { fill: "red", strokeWidth: 0, width: 8, height: 8 }),
    {
      dragComputation: function(node, pt) {
        var scale = gauge.findObject("SCALE");
        var loc = scale.getLocalPoint(pt);
        var val = scale.graduatedValueForPoint(loc);
        var gpt = scale.graduatedPointForValue(val);
        return scale.getDocumentPoint(gpt);
      }
    }
  );
diagram.add(marker);

// once everything has been positioned, give the marker its location
diagram.addDiagramListener("InitialLayoutCompleted", function(e) {
  var scale = gauge.findObject("SCALE");
  var gpt = scale.graduatedPointForValue(0);
  marker.location = scale.getDocumentPoint(gpt);
});

請注意，出于演示目的，此示例將標(biāo)記與“量規(guī)”零件分開。真正的量規(guī)會將標(biāo)記作為特定值的指示符作為量規(guī)的一部分，可以由用戶任意拖動。請參見“ 儀器控件：儀表和儀表”中的一些示例。其他注意事項

默認(rèn)情況下，只能使用“漸變面板”的主要形狀來拾取面板。與網(wǎng)格面板一樣，background如果需要對整個面板進(jìn)行拾取，則漸變面板應(yīng)為非空。您不能設(shè)置或綁定帶刻度面板的Panel.itemArray。可以像其他任何GraphObject屬性一樣，在tick Shape和TextBlock標(biāo)簽上設(shè)置和綁定屬性。

diagram.add(
  $(go.Part, "Graduated",  // or "Graduated"
    { background: "white" },
    $(go.Shape, { geometryString: "M0 0 H150", stroke: "blue", strokeWidth: 2 }),
    $(go.Shape, { geometryString: "M0 0 V20", stroke: "blue", strokeDashArray: [2, 2] })
  ));