2015-10-18 8 views

答えて

8

を使用して、任意の手段によって作成されるチャートのこのタイプのため、それが可能です代わりのチャートライブラリZingChartを使用します。チャートタイプ「range」とrulesフィーチャを使用して、特定の値の範囲に応じて最小および最大色領域を設定できます。水平の赤と青の線は、スケール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

あなた に感謝しかし、私はすでにGoogleのチャートAPIを介して大規模な量を開発している、と私はそこ範囲チャートとダッシュボード機能に依存しています。 google api でこのタイプのグラフが表示されないようです。回答ありがとうございました このapiに切り替える必要があります。 Googleのようなものがあることを願って – Buddhi741

関連する問題