2015-10-18 30 views

Odpowiedz

8

Twój przykład może być osiągnięty przez przy użyciu alternatywnej biblioteki wykresów o nazwie ZingChart. Możesz użyć funkcji wykresu "range" i funkcji rules, aby ustawić obszary min i maks. Kolorów w zależności od pewnego zakresu wartości. Poziome czerwone i niebieskie linie można uzyskać za pomocą znaczników skali x.

Zobacz przykład poniżej, w jaki sposób wykorzystać ZingChart do osiągnięcia tego, czego szukasz. Pracuję w zespole ZingChart, więc skontaktuj się z nami, jeśli potrzebujesz dalszej pomocy.

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

dziękuję ale mam już opracowany rozległą kwotę przez google api wykresów, i polegać na nie wahają się wykresy i udogodnienia desce rozdzielczej. Wygląda na to, że tego typu wykresy nie są możliwe za pośrednictwem Google Api , więc dziękuję bardzo za odpowiedź będę musiał przejść do tego api. nadzieja, że ​​Google ma coś takiego – Buddhi741