Diplay多个图表js图表在一页上

时间:2017-02-22 20:48:20

标签: python html csv chart.js

我的代码应该从三张csv表中读出日期。接下来,我想在html文件中显示带有chartjs的读取值。但是创建的html文件显示覆盖的图表和标题完全没有。有人能告诉我这个错误吗? 谢谢你的帮助!

负责人:

self.navigationcontroller.navigationbar.barTintColor = .white

体:

   window.onload = function () {
   var chartGarage = new CanvasJS.Chart("chartContainerGarage",
   {
        axisX:{      
            valueFormatString: "H:m" ,
            labelAngle: -50
        },
        axisY:{
            minimum: 40,
            maximum: 95
        },
        data:[
        {
            type: "line",
            dataPoints: [   
    ''') 

r = 0
for row in csvDataGarage:
    if r < 30:
        html.write('{ x: new Date('+ row[0] + '), y:' + row[2] + '},')
    r += 1

html.write('''
                        ]
        }
            ]
    });
    chartGarage.render();
    var chartWerkstatt = new CanvasJS.Chart("chartContainerWerkstatt",
   {
        axisX:{      
            valueFormatString: "H:m" ,
            labelAngle: -50
        },
        axisY:{
            minimum: 40,
            maximum: 95
        },
        data:[
        {
            type: "line",
            dataPoints: [   
    ''') 

r = 0
for row in csvDataWerkstatt:
    if r < 30:
        html.write('{ x: new Date('+ row[0] + '), y:' + row[2] + '},')
    r += 1

html.write('''
                        ]
        }
            ]
    });
    chartWerkstatt.render();
    var chartWaschhalle = new CanvasJS.Chart("chartContainerWaschhalle",
   {
        axisX:{      
            valueFormatString: "H:m" ,
            labelAngle: -50
        },
        axisY:{
            minimum: 40,
            maximum: 95
        },
        data:[
        {
            type: "line",
            dataPoints: [   
    ''') 

r = 0
for row in csvDataWaschhalle:
    if r < 30:
        html.write('{ x: new Date('+ row[0] + '), y:' + row[2] + '},')
    r += 1

html.write('''
                        ]
        }
            ]
    });
    chartWaschhalle.render();
    }
</script>

有人能告诉我应该改变什么吗?

1 个答案:

答案 0 :(得分:0)

Chart.js使用HTML5 <?php $folder_path = 'images/'; //image's folder path $num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE); $folder = opendir($folder_path); if($num_files > 0) { while(false !== ($file = readdir($folder))) { $file_path = $folder_path.$file; $extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION)); if($extension=='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp') { ?> <a href="<?php echo $file_path; ?>"><img src="<?php echo $file_path; ?>" height="200" /></a> <?php } } } else { echo "the folder was empty !"; } closedir($folder); 元素来包含图表 - 就像在line.html示例中一样:

<canvas>

我的<body> <div style="width:75%;"> <canvas id="canvas"></canvas> </div> 代码中没有<canvas>元素。 然后在JavaScript中使用该元素来创建图表元素:

<body>