JavaScript Teechart 曲线问题

我想为图表绘制平滑的线条。我已经使用 teechart.js 制作了一个图表，但它效果不佳。我附上了一张图片。左图是我的。我想做这样的台词，比如右边

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
            <title>Chart</title>
            <script src="./js/three.min.js" type="text/javascript"></script>
            <script src="./js/Detector.js" type="text/javascript"></script>
            <script src="./js/TrackballControls.js" type="text/javascript"></script>
            <script src="./js/helvetiker_regular.typeface.js"></script>
            <script src="./js/teechart.js" type="text/javascript"></script>
            <script src="./js/teechart-3d.js" type="text/javascript"></script>
            <script type="text/javascript">
            "use strict";
            var three1, Chart1;
            function draw() {
                three1 = new Tee.Three("canvas1");
                three1.setShowShadows(true);
                Chart1 = new Tee.Chart(three1); 
                Chart1.addSeries(new Tee.Line([60,70,70,60,50,40,30,40,50,60,50,40] , 'Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec'.split(',')));
                Chart1.addSeries(new Tee.Line([20,30,40,50,60,50,40,50,60,70,70,60]));
                Chart1.title.text="";
                Chart1.footer.text="";
                Chart1.legend.visible = false;
                Chart1.walls.back.size=0.2;
                Chart1.walls.left.size=10;
                Chart1.walls.bottom.size=10;
                Chart1.walls.back.format.transparency=0.2;
                Chart1.bounds.x = -100; 
                Chart1.bounds.y = 50;
                Chart1.bounds.width = 900;
                Chart1.bounds.height = 400;
                Chart1.axes.left.setMinMax(0, 120);
                if (three1.isEnabled()) {
                    Chart1.draw();
                    animate1();
                } else {
                    // Show message (WebGL not available) :
                    Detector.addGetWebGLMessage();
                    // Disable WebGL and use HTML5 2D Canvas:
                    three1.setEnabled(false, Chart1);
                }
                // Loop
                function animate1() {
                    three1.update();
                    requestAnimationFrame(animate1);
                }
            }
    </script>
        </head>
        <body onload="draw()">
            <canvas id="canvas1" style="width: 700px; height: 500px; display: inline; background: white;" width="800" height="500"></canvas>
        </body>
    </html>

希望有好的答案。

检查您的代码，我看到它错过了一些细节，但纠正它们没有问题：

设置平滑线条。在您的示例中，它将是：

Chart1.series.items[0].smooth = 0.5;
Chart1.series.items[1].smooth = 0.5;

包括teechart-extras.js以定义Tee.drawSpline。它会是这样的：

<script src="./js/teechart-extras.js" type="text/javascript"></script>

我认为

您应该看看THREE.TubeGeometry在哪里可以通过样条曲线/曲线作为管子的路径：

extrudePath = // define some spline or curve;
segments = 64;
radius = 5;
radiusSegments = 8;
closed = false;
tube = new THREE.TubeGeometry( extrudePath, segments, radius, radiusSegments, closed );
mesh = new THREE.Mesh( tube, material );
scene.add( mesh );

另请查看此处的示例

相关内容

最新更新

热门标签：