Teechart HTML5/Javascript 标签可自动扩展

Teechart HTML5/Javascript labels automaticly scale

本文关键字：扩展 标签 HTML5 Javascript Teechart      更新时间：2023-09-26

在我写信给他们的支持之前，我想问问你们。

我已经购买了teechart javascript版本。它工作正常，但问题是我在系列上使用的标签相互堆叠，它的日期。

我希望他们只显示适合那里的内容，并在缩放时显示更多内容。

这是我的代码

    <script type="text/javascript">
var Chart;
function draw() {
    Chart=new Tee.Chart("graf");
        var input0 = new Tee.Line();
    Chart.addSeries(input0);
    input0.data.values =  ["-47.9","-47.6","-47.4","-48.6","-48.2","-49.7","-49.1","-49.2","-48.1","-47.6","-48.3","-48","-49.3","-49.2","-49.7","-49.8","-47.5","-47.2","-49","-47.4","-47.6","-49.4","-48.1","-48.6","-48.4","-48.5","-48.7","-49.1","-48.6","-49.4","-49.7"];
    input0.data.labels = ["120503 14:00","120503 14:01","120503 14:02","120503 14:03","120503 14:04","120503 14:05","120503 14:06","120503 14:07","120503 14:08","120503 14:09","120503 14:10","120503 14:11","120503 14:12","120503 14:13","120503 14:14","120503 14:15","120503 14:16","120503 14:17","120503 14:18","120503 14:19","120503 14:20","120503 14:21","120503 14:22","120503 14:23","120503 14:24","120503 14:25","120503 14:26","120503 14:27","120503 14:28","120503 14:29","120503 14:30"];
    input0.title = "Input 1";
        var input1 = new Tee.Line();
    Chart.addSeries(input1);
    input1.data.values =  ["-38.4","-37.9","-39.8","-39.1","-37","-37","-39.9","-39.5","-39.4","-38.9","-37.9","-38.5","-37.1","-38.1","-37.6","-39.7","-39.8","-38.4","-39.7","-37.7","-39.1","-37.4","-38.8","-39.3","-38.8","-38.8","-38.5","-39.1","-39.4","-37.1","-39.5"];
    input1.data.labels = ["120503 14:00","120503 14:01","120503 14:02","120503 14:03","120503 14:04","120503 14:05","120503 14:06","120503 14:07","120503 14:08","120503 14:09","120503 14:10","120503 14:11","120503 14:12","120503 14:13","120503 14:14","120503 14:15","120503 14:16","120503 14:17","120503 14:18","120503 14:19","120503 14:20","120503 14:21","120503 14:22","120503 14:23","120503 14:24","120503 14:25","120503 14:26","120503 14:27","120503 14:28","120503 14:29","120503 14:30"];
    input1.title = "Input 2";
        var input2 = new Tee.Line();
    Chart.addSeries(input2);
    input2.data.values =  ["-28.3","-29.9","-27.2","-28.1","-27.3","-28","-29.1","-29.5","-29.4","-29.1","-27.3","-28.5","-29.8","-28.4","-28.6","-29","-29.4","-29.7","-28.2","-29.2","-29.3","-28.2","-27.1","-27","-27.5","-27.9","-29.3","-29.5","-27.9","-29.8","-29.9"];
    input2.data.labels = ["120503 14:00","120503 14:01","120503 14:02","120503 14:03","120503 14:04","120503 14:05","120503 14:06","120503 14:07","120503 14:08","120503 14:09","120503 14:10","120503 14:11","120503 14:12","120503 14:13","120503 14:14","120503 14:15","120503 14:16","120503 14:17","120503 14:18","120503 14:19","120503 14:20","120503 14:21","120503 14:22","120503 14:23","120503 14:24","120503 14:25","120503 14:26","120503 14:27","120503 14:28","120503 14:29","120503 14:30"];
    input2.title = "Input 3";
        var input3 = new Tee.Line();
    Chart.addSeries(input3);
    input3.data.values =  ["-19.1","-18.8","-18.9","-18.1","-19.3","-20","-18.9","-18.1","-18.2","-17.2","-17.5","-18.6","-18.8","-19.5","-17.7","-19.6","-18","-17.7","-19.5","-18","-18.6","-17.7","-19.7","-19.6","-17.5","-19.5","-18.1","-18.4","-17.8","-19.8","-17.9"];
    input3.data.labels = ["120503 14:00","120503 14:01","120503 14:02","120503 14:03","120503 14:04","120503 14:05","120503 14:06","120503 14:07","120503 14:08","120503 14:09","120503 14:10","120503 14:11","120503 14:12","120503 14:13","120503 14:14","120503 14:15","120503 14:16","120503 14:17","120503 14:18","120503 14:19","120503 14:20","120503 14:21","120503 14:22","120503 14:23","120503 14:24","120503 14:25","120503 14:26","120503 14:27","120503 14:28","120503 14:29","120503 14:30"];
    input3.title = "Input 4";
        var input4 = new Tee.Line();
    Chart.addSeries(input4);
    input4.data.values =  ["-9.1","-7.4","-8.4","-9.2","-7.9","-8.3","-9.1","-8.8","-9.8","-8.1","-9.9","-8.9","-8.9","-7.2","-8.2","-10","-8.6","-8.8","-7.2","-9.2","-9.2","-7.2","-7.2","-9.9","-8","-8.7","-8.5","-9.3","-8.2","-7.6","-8.4"];
    input4.data.labels = ["120503 14:00","120503 14:01","120503 14:02","120503 14:03","120503 14:04","120503 14:05","120503 14:06","120503 14:07","120503 14:08","120503 14:09","120503 14:10","120503 14:11","120503 14:12","120503 14:13","120503 14:14","120503 14:15","120503 14:16","120503 14:17","120503 14:18","120503 14:19","120503 14:20","120503 14:21","120503 14:22","120503 14:23","120503 14:24","120503 14:25","120503 14:26","120503 14:27","120503 14:28","120503 14:29","120503 14:30"];
    input4.title = "Input 5";
        var input5 = new Tee.Line();
    Chart.addSeries(input5);
    input5.data.values =  ["2.3","2.4","2.3",".8","2.9",".3","2.8","1.2","1.4","1.9","1.6","1.2","1.5","2","2.5","1.6","1.1","1.4",".3",".3","1","1","1.9","1","2.2","1.6","2","1.8","2.3","1.1","1.7"];
    input5.data.labels = ["120503 14:00","120503 14:01","120503 14:02","120503 14:03","120503 14:04","120503 14:05","120503 14:06","120503 14:07","120503 14:08","120503 14:09","120503 14:10","120503 14:11","120503 14:12","120503 14:13","120503 14:14","120503 14:15","120503 14:16","120503 14:17","120503 14:18","120503 14:19","120503 14:20","120503 14:21","120503 14:22","120503 14:23","120503 14:24","120503 14:25","120503 14:26","120503 14:27","120503 14:28","120503 14:29","120503 14:30"];
    input5.title = "Input 6";
        var input6 = new Tee.Line();
    Chart.addSeries(input6);
    input6.data.values =  ["10","11.1","10.2","12.5","10.7","10.3","12.9","12.1","12.7","11.3","12.7","10.8","10.5","11.5","10.1","12","10.4","11.5","11.3","10.1","10.1","11.6","11","11.6","13","12.4","12.7","11.1","10.5","11.4","10.7"];
    input6.data.labels = ["120503 14:00","120503 14:01","120503 14:02","120503 14:03","120503 14:04","120503 14:05","120503 14:06","120503 14:07","120503 14:08","120503 14:09","120503 14:10","120503 14:11","120503 14:12","120503 14:13","120503 14:14","120503 14:15","120503 14:16","120503 14:17","120503 14:18","120503 14:19","120503 14:20","120503 14:21","120503 14:22","120503 14:23","120503 14:24","120503 14:25","120503 14:26","120503 14:27","120503 14:28","120503 14:29","120503 14:30"];
    input6.title = "Input 7";
        var input7 = new Tee.Line();
    Chart.addSeries(input7);
    input7.data.values =  ["22.3","22.9","21.8","22.5","21.6","22.4","21.2","21","20.8","20.3","21.3","20.2","21.4","21.2","20.6","21.6","22.1","20.6","20.8","21","21.4","20.2","20.4","22.8","21","21.6","21.1","22.6","22.4","20.4","21.4"];
    input7.data.labels = ["120503 14:00","120503 14:01","120503 14:02","120503 14:03","120503 14:04","120503 14:05","120503 14:06","120503 14:07","120503 14:08","120503 14:09","120503 14:10","120503 14:11","120503 14:12","120503 14:13","120503 14:14","120503 14:15","120503 14:16","120503 14:17","120503 14:18","120503 14:19","120503 14:20","120503 14:21","120503 14:22","120503 14:23","120503 14:24","120503 14:25","120503 14:26","120503 14:27","120503 14:28","120503 14:29","120503 14:30"];
    input7.title = "Input 8";
    Chart.axes.left.title.text="Y";
    Chart.title.text="Input graf";
    Chart.title.format.font.style="18px Verdana";
    Chart.draw();
}</script>
<canvas id="graf" width="800" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>

我认为自动避免标签堆叠的代码中有问题，我将对其进行审查并为您的示例代码找到修复程序。您可以使用以下代码手动分隔标签：

Chart.axes.bottom.increment=3;
Chart.axes.bottom.labels.alternate=true;
Chart.draw();

另一种方法是将标签旋转 90 度，但此功能尚未发布，有待改进：

Chart.axes.bottom.labels.rotation=90; // degree
Chart.axes.bottom.labels.padding=50;  // pixels
相关文章：