Question

我正在使用Teechart库以1秒的时间间隔显示y轴。 Chart1.axes.left.increment = 1;帮助我在1的区间内增加y轴。我需要的是在这些实线之间布置虚线。我想在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);

    }

IMAGE1：

图像2：

Answer 1

此处的示例显示了如何扩展底部轴添加新的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>

<App/>

使用Teechart在时间间隔内手动绘制y轴

1 个答案: