how to use same script.js file for calling different CSS class using multiple Ids

问题

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();

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;
}

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.

回答1:

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");

来源：https://stackoverflow.com/questions/50533223/how-to-use-same-script-js-file-for-calling-different-css-class-using-multiple-id