javascript - javascript teechart曲线问题

我想为图表绘制平滑线。
我已经使用teechart.js制作了图表，但是效果不好。
我已附上图片。左图是我的。
I'd like to make line such as right

<!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>

TeeChart

javascript - javascript teechart曲线问题