Question

我已经制作了一个页面，其中相同的圆环图将会出现4次。而且大小也是一样的。但那里的立场会有所不同。一个人应该从另一个人那里获得至少20个像素的空间。为此，我写了4个css风格。但是当我尝试使用相同的script.js调用它们时它们不起作用，但是当我添加一个新的script2.js并更改id名称时，它可以工作。为此，我必须制作4个script.js，其作品相同。

var myCanvas = document.getElementById("myCanvas1");
myCanvas.width = 50;
myCanvas.height = 40;

var ctx = myCanvas.getContext("2d");

function drawLine(ctx, startX, startY, endX, endY) {
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.stroke();
}

function drawArc(ctx, centerX, centerY, radius, startAngle, endAngle) {
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.stroke();
}
function drawPieSlice(ctx, centerX, centerY, radius, startAngle, endAngle, color) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
    ctx.closePath();
    ctx.fill();
}
var myVinyls = {
    "Positive": 50,
    "Negative": 10,
    "N/A": 20
};
var Piechart = function (options) {
    this.options = options;
    this.canvas = options.canvas;
    this.ctx = this.canvas.getContext("2d");
    this.colors = options.colors;

    this.draw = function () {
        var total_value = 0;
        var color_index = 0;
        for (var categ in this.options.data) {
            var val = this.options.data[categ];
            total_value += val;
        }

        var start_angle = 0;
        for (categ in this.options.data) {
            val = this.options.data[categ];
            var slice_angle = 2 * Math.PI * val / total_value;

            drawPieSlice(
                this.ctx,
                this.canvas.width / 2,
                this.canvas.height / 2,
                Math.min(this.canvas.width / 2, this.canvas.height / 2),
                start_angle,
                start_angle + slice_angle,
                this.colors[color_index % this.colors.length]
            );

            start_angle += slice_angle;
            color_index++;
        }

        //drawing a white circle over the chart
        //to create the doughnut chart
        if (this.options.doughnutHoleSize) {


            drawPieSlice(
                this.ctx,
                this.canvas.width / 2,
                this.canvas.height / 2,
                this.options.doughnutHoleSize * Math.min(this.canvas.width / 2, this.canvas.height / 2),
                0,
                2 * Math.PI,
                "#206020"
            );
        }

    }
}
var myDougnutChart = new Piechart(
    {
        canvas: myCanvas,
        data: myVinyls,
        colors: ["#32CD32", "#FF0000", "#FFFF00"],
        doughnutHoleSize: 0.7
    }
);

myDougnutChart.draw();

这是html和css

     //html//

<div class="chart2">
    <canvas id="myCanvas1"></canvas>
    <script type="text/javascript" src="script2.js"></script>
</div>
<div class="chart3">
    <canvas id="myCanvas2"></canvas>
    <script type="text/javascript" src="script3.js"></script>

</div>

     //CSS File//

.chart2 {
    padding: 1em 3px 3px 5px;
    width: 66;
    height: 63;
    position: absolute;
    left: 122px;
    bottom: 0px;
}

.chart3 {
    padding: 1em 3px 3px 5px;
    width: 66;
    height: 63;
    position: absolute;
    left: 162px;
    bottom: 0px;
}

但是我只想要一个script.js来调用所有的css文件。但它不起作用。我要编写单独的JS文件来调用单独的css文件。

Answer 1

如果我理解正确你的问题是你在硬编码的画布元素中绘图。参数化你的抽屉并用不同的id调用它两次。根据此模式更改脚本

function drawInCanvas(id){
  var myCanvas = document.getElementById(id);
  myCanvas.width = 50;
  myCanvas.height = 40;

  // and the rest of the code...
}

drawInCanvas("myCanvas1");
drawInCanvas("myCanvas2");

如何使用相同的script.js文件使用多个ID调用不同的CSS类

1 个答案: