2015-10-18 39 views

回答

8

你的例子可以通過實現的任何手段來創建使用名爲ZingChart的替代圖表庫。您可以使用圖表類型「range」和rules功能根據特定值範圍設置最小和最大顏色區域。水平的紅色和藍色線條可以通過使用scale-x標記來實現。

請參閱下面的示例,瞭解如何利用ZingChart實現您正在尋找的內容。我在ZingChart團隊,如果您需要任何進一步幫助,請隨時與我們聯繫。

var myConfig = { 
 
    type:"range", 
 
    backgroundColor : "white", 
 
    scaleX:{ 
 
     maxItems:8, 
 
     zooming:1, 
 
    }, 
 
    scaleY:{ 
 
     minValue:"auto", 
 
     markers : [ 
 
     { 
 
      type : "line", 
 
      range : [70], 
 
      lineColor : "red" 
 
     }, 
 
     { 
 
      type : "line", 
 
      range : [30], 
 
      lineColor : "blue" 
 
     } 
 
     ] 
 
    }, 
 
    "series":[ 
 
     { 
 
      lineWidth:2, 
 
      lineColor:"#8100a4", 
 
      marker:{ 
 
      type:"none" 
 
      }, 
 
      values : [[60,60],[70,70],[78,70],[75,70],[70,70],[50,50],[60,60],[60,60],[60,60],[34,34],[35,35],[35,35],[35,35],[30,30],[24,30],[26,30],[25,30],[28,30],[30,30],[32,32]], 
 
      backgroundColor:"#1049c4", 
 
      rules:[ 
 
      { 
 
       rule:"%node-max-value < %node-min-value", 
 
       backgroundColor:"#c00" 
 
      } 
 
      ], 
 
      minLine:{ 
 
      lineColor:"#8100a4", 
 
      }, 
 
      maxLine:{ 
 
      lineColor:"#8100a4" 
 
      } 
 
     } 
 
    ] 
 
}; 
 
    
 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 300, 
 
\t width: 500 
 
});
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/2.1.4/zingchart.min.js"></script> 
 
\t \t <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/2.1.4/modules/";</script></head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

+0

謝謝 ,但我已經通過谷歌圖表API開發了一個廣泛的量,我靠,有範圍的圖表和儀表板設施。 似乎這種類型的圖表是不可能通過谷歌api 非常感謝你的答案 我將不得不切換到這個api。希望谷歌有類似的東西 – Buddhi741

相關問題