在一个页面上显示多个图表js图

2024-10-01 17:30:33 发布

您现在位置：Python中文网/ 问答频道 /正文
6663 3

我的代码应该从三个csv表中读出日期。接下来，我想在一个html文件中用chartjs显示读值。但是创建的html文件显示的是重叠的图表，而标题则完全没有。有人能告诉我错误吗？ 谢谢你的帮助！在

头部：

   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>

正文：

^{pr2}$

有人能告诉我该换什么吗？在


Tags： newdatavarhtmltypechartwriterow
1条回答
网友
1楼 · 发布于 2024-10-01 17:30:33

在图表.js使用HTML5<canvas>元素来包含图表-如行.html样品：

<body>
<div style="width:75%;">
    <canvas id="canvas"></canvas>
</div>

我在您的<body>代码中没有看到<canvas>元素。 然后在JavaScript中使用该元素创建图表元素：

^{pr2}$

相关问题 更多 >

    编程相关推荐

    热门问题