Question

同事，

我设计了一个带有HTML画布的仪表板，想要在同一页面上显示一个flot图，用一个按钮在它们之间切换。我面临的问题是，当我点击获取flot时，图形显示在画布下，而不是在同一个地方（我想要）。这是相关的代码：

<!DOCTYPE html>
<html>
<body>

<canvas id="canvas" width="800" height="400" style="background-color:#ffffff"></canvas>

<script>

 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var radio = canvas.height / 2;
 var ent_direc={{ent_direc}};
 var ent_vel={{ent_vel}};
 ctx.translate(radio,radio);
 radio_direc = radio * 0.9;
......

单击按钮

时调用show_graph函数

function show_graph(){
// create dynamic DIV to hold graph

        var div = document.createElement('div');
        div.id = "placeholder";
        document.body.appendChild(div) document.getElementById("placeholder").setAttribute("style","width:600px;height:300px");


        ctx.save();

        // Use the identity matrix while clearing the canvas
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Restore the transform
        ctx.restore();

        data_g =[ [0,2],[1,4],[2,5]];
        $(document).ready(function(){
                $.plot($("#placeholder"), [
                {
                        data: data_g ,
                        bars:
                        {
                                show: true
                        }
                }
        ]);
});

有关如何在同一画布区域显示flot图的任何想法吗？

Answer 1

你尝试的并不是那么简单。 Flot采用div元素并在此div中创建自己的canvas元素（以及画布周围的一些东西，如轴标签）。

最简单的解决方案是在创建Flot图时隐藏原始画布：

$('#canvas').hide();

在同一画布上交换图形

1 个答案: