如何使用相同的script.js文件使用多个ID调用不同的CSS类 [英] how to use same script.js file for calling different CSS class using multiple Ids

问题描述

我制作了一个页面，其中相同的甜甜圈图将出现4次。而且大小会相同。但是那里的立场会有所不同。一个应该占用至少20px的空间。为此，我编写了4个CSS样式。但是，当我尝试使用相同的script.js调用它们时，它们不起作用，但是当我添加了一个新的具有更改ID名称的script2.js时，它起作用了。为此，我必须制作4个工作原理相同的script.js。

I've made a page where same donut chart will come 4 times. And there size will be same. But there position will be different. One should take atleast 20px space from another. For this, I've written 4 css style. But when i try to call them using same script.js they are not working but when i added a new script2.js with changing the id name it works. For this i had to make 4 script.js whose works is same.

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

This is the html and 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文件。

But i want only one script.js to call all the css file. But it's not working. I've to write separate JS file for calling separate css file.

推荐答案

如果我正确理解了您的问题，那么您重新绘制硬编码画布元素。参数化抽屉，并使用不同的ID两次调用它。根据此模式更改脚本

If I understood you correctly your problem is that you're drawing in a hardcoded canvas element. Parametrise your drawer and call it two times with different id. Change your script according to this pattern

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类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！