как использовать один и тот же файл script.js для вызова другого класса CSS с использованием нескольких идентификаторов

Question

Я создал страницу, на которой один и тот же график пончиков будет появляться 4 раза.И там размер будет такой же.Но там положение будет другим.Один должен занимать как минимум 20px пространства от другого.Для этого я написал 4 стиля CSS.Но когда я пытаюсь вызвать их, используя тот же script.js, они не работают, но когда я добавил новый script2.js с изменением имени, он работает.Для этого я должен был сделать 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

Если я правильно вас понял, ваша проблема в том, что вы рисуете в жестко запрограммированном элементе canvas.Параметризируйте свой ящик и назовите его два раза с другим идентификатором.Измените ваш скрипт в соответствии с этим шаблоном

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

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

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