Teechartを使用して時間間隔でyaxisを手動で描画する

Question

Teechartライブラリを使用してy軸を1秒の時間間隔で表示しています。 Chart1.axes.left.increment = 1;私は1の間隔でyaxisを増やすのに役立ちます。私が必要とするのは、これらの実線の間に点線を配置することです。私は手動で0.20秒の時間間隔で点線の系列を追加したい。ラインシリーズを使用して点線を追加するにはどうすればよいですか？

function draw_TeeChart() { 

      var w = window.innerWidth, h = window.innerHeight; 

      // Initialize Teechart[![enter image description here][1]][1] 
      Chart1 = new Tee.Chart("canvas"); 

      document.getElementById("canvas").style.position = "relative"; 
      document.getElementById("canvas").width= Math.round(0.82*w);document.getElementById("canvas").height= Math.round(0.89*h); //Chart1.bounds.x = Math.round(0.01*w); 

      Chart1.bounds.x = 14;Chart1.bounds.y= 10; 
      Chart1.bounds.width = Math.round(chartW*w);Chart1.bounds.height= Math.round(0.88*h); 
      Chart1.legend.visible = false; Chart1.panel.transparent = true; 
      Chart1.title.visible = false;Chart1.axes.bottom.title.text = " "; 
      Chart1.axes.left.increment = 1; 


      Chart1.axes.bottom.increment=1; 

Chart1.axes.bottom.innerTicks.visible = true; 
     Chart1.axes.bottom.ticks.length = 9; 
     Chart1.axes.bottom.ticks.stroke.fill = "blue"; 

     Chart1.axes.bottom.minorTicks.visible = true; 
     Chart1.axes.bottom.minorTicks.length = 4; 
     Chart1.axes.bottom.minorTicks.count = 4; 
     Chart1.axes.bottom.minorTicks.stroke.fill = "green"; 



      // var dottedLines = Chart1.axes.bottom.increment=.2; 


       // var increment = 0.20; 
       // var dottedLines = Chart1.axes.bottom.grid.format.stroke.dash = [5,3]; 
       // var solidLines = Chart1.axes.bottom.increment=1; 


      // for(increment =0.20;increment<100;increment =increment+0.20){ 

      // if (increment % 1 == 0) { 

      // Chart1.axes.bottom.increment=1; 
      //  } 
      // else { 
      //  Chart1.axes.bottom.increment=0.20; 
      //  Chart1.axes.bottom.grid.format.stroke.dash = [5,3]; 
      // } 

      // } 

      Chart1.walls.back.format.fill = wallColorCode; 
      Chart1.walls.back.format.shadow.visible = false; 
      document.body.style.cursor = "pointer"; 

      document.getElementById("EventCount").value = event_time.length.toFixed(0); 

    } 

画像1：

画像2：ここでは

Answer 1

あなたは下の軸に新しいinnerGridプロパティを追加し、drawLabelオーバーライドでそれを使用して拡張することができるかを示す例。

var Chart1; 
 

 
function draw() { 
 
    Chart1 = new Tee.Chart("canvas1"); 
 

 
    var line1 = Chart1.addSeries(new Tee.Line()); 
 
    line1.data.values = [10, 20, 30, 20, 50]; 
 

 
    Chart1.legend.visible = false; 
 

 
    Chart1.axes.bottom.setMinMax(0, 5); 
 
    Chart1.axes.bottom.increment = 1; 
 
    Chart1.axes.bottom.innerTicks.visible = true; 
 
    Chart1.axes.bottom.ticks.length = 9; 
 
    Chart1.axes.bottom.ticks.stroke.fill = "blue"; 
 
    Chart1.axes.bottom.minorTicks.visible = true; 
 
    Chart1.axes.bottom.minorTicks.length = 4; 
 
    Chart1.axes.bottom.minorTicks.count = 4; 
 
    Chart1.axes.bottom.minorTicks.stroke.fill = "green"; 
 

 
    Chart1.axes.bottom.innerGrid = []; 
 
    Chart1.axes.bottom.innerGrid.increment = 0.20; 
 
    Chart1.axes.bottom.innerGrid.format = new Tee.Format(Chart1); 
 
    Chart1.axes.bottom.innerGrid.format.stroke.fill = Chart1.axes.bottom.grid.format.stroke.fill; 
 
    Chart1.axes.bottom.innerGrid.format.stroke.dash = [5, 3]; 
 
    Chart1.axes.bottom.oldDrawLabel = Chart1.axes.bottom.drawLabel; 
 

 
    Chart1.axes.bottom.drawLabel = function(value, r) { 
 
    this.oldDrawLabel(value, r); 
 

 
    var c = this.chart.ctx, 
 
     rect = this.chart.chartRect, 
 
     f = this.innerGrid.format, 
 
     tmpX; 
 

 
    var tmpValue = value + this.innerGrid.increment; 
 

 
    while (tmpValue < value + this.increment) { 
 
     tmpX = Chart1.axes.bottom.calc(tmpValue); 
 

 
     if ((tmpX > rect.x) && (tmpX < rect.x + rect.width)) { 
 
     c.beginPath(); 
 

 
     c.moveTo(tmpX, rect.y); 
 
     c.lineTo(tmpX, rect.y + rect.height); 
 

 
     f.stroke.prepare(); 
 
     c.stroke(); 
 
     } 
 

 
     tmpValue += this.innerGrid.increment; 
 
    } 
 

 
    //draw innerGrid between the axis minimum and the first label. Happens when scrolled 
 
    if (value - this.increment <= this.minimum) { 
 
     tmpValue = value - this.innerGrid.increment; 
 

 
     while (tmpValue > value - this.increment) { 
 
     tmpX = Chart1.axes.bottom.calc(tmpValue); 
 

 
     if ((tmpX > rect.x) && (tmpX < rect.x + rect.width)) { 
 
      c.beginPath(); 
 

 
      c.moveTo(tmpX, rect.y); 
 
      c.lineTo(tmpX, rect.y + rect.height); 
 

 
      f.stroke.prepare(); 
 
      c.stroke(); 
 
     } 
 

 
     tmpValue -= this.innerGrid.increment; 
 
     } 
 
    } 
 
    }; 
 
    Chart1.draw(); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <script src="http://www.steema.com/files/public/teechart/html5/latest/src/teechart.js" type="text/javascript"></script> 
 
</head> 
 

 
<body onload="draw()"> 
 
    <canvas id="canvas1" width="500" height="300"> 
 
    This browser does not seem to support HTML5 Canvas. 
 
</canvas> 
 
</body> 
 

 
</html>