2012-05-08 35 views
0

在我写信给他们的支持之前,我正试着问你的家伙。Teechart HTML5/Javascript标签自动缩放

我买了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> 

回答

1

我认为某件事情是错误的,可以自动避开标签堆栈的代码,我会进行审核,并找到你的示例代码修复。 您可以手动空间标签用下面的代码:

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 
+0

任何运气得到它的工作? – NikolajSvendsen