Jquery滑块不使用图形

我试图创建一个jquery滑块，该滑块连接到数据，并在触发jquery事件时在图形上移动图像。我已经能够创建滑块，但它无法连接到我的数据，我也无法让它与图形交互（或者让图形显示在我的网页上）。这是一个班级项目，所以我真的需要让它工作，否则就要冒失败的风险。。。 这是我目前掌握的代码：

 jQuery(document).ready(function($){
    $("#Slider1").slider ({
            slide: function(event,ui){drawGraphs();}
    });
    $("#slider1’").each(
            function(){
                    $(this).slider("value",Math.random() * 100);
            }
    );

    drawGraphs();

    });

    function drawGraphs(){
    var cHeight = parseInt($("#Graph1").height());
    var cWidth = parseInt($("#Graph1").width());
    clearCanvas($("#Graph1"));
    clearCanvas($("#Graph2"));
    var canvas = document.getElementById("Graph1");
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle = "rgb(0,0,0)";
    ctx.beginPath();
    ctx.moveTo(graphPadding, graphPadding);
    ctx.lineTo(graphPadding,cHeight-graphPadding);
    ctx.lineTo(cWidth-graphPadding, cHeight-graphPadding);
    ctx.stroke();
    ctx.closePath();
    var availableSpace = cWidth-(graphPadding * 4);
    var horizSpace = availableSpace / 3;
    var vertSpace = cHeight -(graphPadding * 4);var points = new Array();
    for(var i = 0;i < 4;i++){
            var yPercent  = ($("#Slider1" + (i + 1)).slider("value") -100) * 
     -1;
            var yPos = (vertSpace * (yPercent / 100) + (graphPadding * 2));
            points.push(yPos);
    }
    var xPos = graphPadding * 2;
    ctx.beginPath();
    for(i = 0;i < 4;i++){
            if(i == 0){
                    ctx.moveTo(xPos, points[i]);
            }else{
                    ctx.lineTo(xPos, points[i]);
            }
            xPos += horizSpace;
    }
    ctx.stroke();
    ctx.closePath();
     var xPos = graphPadding * 2;
    for(i = 0;i < 4;i++){
            drawCircle(ctx, xPos, points[i], 4, colours[i]);
            xPos += horizSpace;
    }
     var availableWidth = cWidth-(graphPadding * 6);
    var barWidth = availableWidth / 4;
    var maxHeight = cHeight- (graphPadding * 3);

    var xPos = graphPadding * 2;
    for(i = 0;i < 4;i++){
            // Work out height
            var h = maxHeight * ($("#Slider1" + (i + 1)).slider("value") / 
     100);
            var yPos = cHeight - h - (graphPadding * 2);
            ctx.fillStyle = colours[i];
            ctx.fillRect(xPos, yPos, barWidth, h);

            xPos += barWidth + graphPadding;

    }
    function clearCanvas(element){
    $(element).attr("width",$(element).attr("width"));
    }

    function drawCircle(ctx, x, y, radius, colour){
    ctx.fillStyle = colour;
    ctx.beginPath();
    ctx.arc(x, y, radius,0,Math.PI*2,true); 
    ctx.fill();

    }

    $(function() {   
    $( "#slider" ).slider({
    change: function(event, ui) {

    }
     });

jQuery（文档）.ready（函数（$）{
$（“#滑块1”）.滑块({
幻灯片：函数（事件，ui）{drawGraphs（）；}
});
$（“#滑块1'）。每个(
函数（）{
$（this）.slider（“value”，Math.random（）*100）；
}
);
绘图图（）；
});
函数drawGraphs（）{
var cHeight=parseInt（$（“#Graph1”）.height（）；
var cWidth=parseInt（$（“#Graph1”）.width（）；
clearCanvas（$（“#Graph1”）；
clearCanvas（$（“#Graph2”）；
var canvas=document.getElementById（“Graph1”）；
var ctx=canvas.getContext（“2d”）；
ctx.strokeStyle=“rgb（0,0,0）”；
ctx.beginPath（）；
ctx.moveTo（图形添加，图形添加）；
ctx.lineTo（图形添加、cHeight图形添加）；
ctx.lineTo（cWidth图形添加、cHeight图形添加）；
ctx.stroke（）；
ctx.closePath（）；
var availableSpace=cWidth-（图形添加*4）；
var horizSpace=可用空间/3；
var vertSpace=cHeight-（graphPadding*4）；var points=new Array（）；
对于（变量i=0；i<4；i++）{
var yPercent=（$（#Slider1+（i+1））.slider（“value”）-100）*
-1;
变量yPos=（顶点空间*（yPercent/100）+（图形添加*2））；
点推（yPos）；
}
var xPos=graphPadding*2；
ctx.beginPath（）；
对于（i=0；i<4；i++）{
如果（i==0）{
ctx.moveTo（XPO，点[i]）；
}否则{
ctx.lineTo（XPO，点[i]）；
}
xPos+=水平空间；
}
ctx.stroke（）；
ctx.closePath（）；
var xPos=graphPadding*2；
对于（i=0；i<4；i++）{
画圈（ctx、XPO、点[i]、4、颜色[i]）；
xPos+=水平空间；
}
var availableWidth=cWidth-（图形相加*6）；
var barWidth=可用宽度/4；
var maxHeight=cHeight-（图形相加*3）；
var xPos=graphPadding*2；
对于（i=0；i<4；i++）{
//计算高度
var h=maxHeight*（$（#Slider1）+（i+1））。滑块（“值”）/
100);
var yPos=cHeight-h-（图形加*2）；
ctx.fillStyle=颜色[i]；
ctx.fillRect（xPos，yPos，barWidth）；
xPos+=条形宽度+图形添加；
}
函数clearCanvas（元素）{
$（元素）.attr（“宽度”，$（元素）.attr（“宽度”）；
}
函数画圈（ctx、x、y、半径、颜色）{
ctx.fillStyle=颜色；
ctx.beginPath（）；
弧（x，y，半径，0，数学π*2，真）；
ctx.fill（）；
}
$（函数（）{
$（“#滑块”）.滑块({
更改：功能（事件、用户界面）{
}
});
没有一个完整的例子，我花了很长时间才确定出错误。我必须定义
图形添加
和
颜色
。我还发现了一些语法错误

以下是一个工作示例：

var canvas = $("#Graph1");
var ctx = canvas[0].getContext("2d");

HTML

<div class="ui-widget">
  <div class="ui-widget-header ui-corner-top">
    Sliders
  </div>
  <div class="ui-widget-content">
    <div id="slider-1" class="slide">
    </div>
    <div id="slider-2" class="slide">
    </div>
    <div id="slider-3" class="slide">
    </div>
    <div id="slider-4" class="slide">
    </div>
  </div>
  <div class="ui-widget-header">
    Graphs
  </div>
  <div class="ui-widget-content ui-corner-bottom">
    <canvas id="Graph1" class="graph" width="300" height="300"></canvas>
    <canvas id="Graph2" class="graph" width="300" height="300"></canvas>
  </div>
</div>

JavaScript

$(document).ready(function($) {
  $(".slide").slider({
    slide: function(event, ui) {
      drawGraphs();
    }
  });
  $(".slide").each(
    function() {
      $(this).slider("value", Math.random() * 100);
    }
  );
  drawGraphs();
});

var graphPadding = 10;
var colours = [
  "rgb(255,0,0)",
  "rgb(255,255,0)",
  "rgb(0,255,0)",
  "rgb(0,0,255)"
];

function drawGraphs() {
  var cHeight = parseInt($("#Graph1").height());
  var cWidth = parseInt($("#Graph1").width());
  clearCanvas($("#Graph1"));
  clearCanvas($("#Graph2"));
  var canvas = $("#Graph1");
  var ctx = canvas[0].getContext("2d");
  ctx.strokeStyle = "rgb(0,0,0)";
  ctx.beginPath();
  ctx.moveTo(graphPadding, graphPadding);
  ctx.lineTo(graphPadding, cHeight - graphPadding);
  ctx.lineTo(cWidth - graphPadding, cHeight - graphPadding);
  ctx.stroke();
  ctx.closePath();
  var availableSpace = cWidth - (graphPadding * 4);
  var horizSpace = availableSpace / 3;
  var vertSpace = cHeight - (graphPadding * 4);
  var points = new Array();
  /*
  for (var i = 0; i < 4; i++) {
    var yPercent = ($("#Slider1" + (i + 1)).slider("value") - 100) * -1;
    var yPos = (vertSpace * (yPercent / 100) + (graphPadding * 2));
    points.push(yPos);
  }
  */
  $(".slide").each(function(ind, el) {
    var yPercent = ($(el).slider("value") - 100) * -1;
    var yPos = (vertSpace * (yPercent / 100) + (graphPadding * 2));
    points.push(yPos);
  });
  console.log("Points: ", points);
  var xPos = graphPadding * 2;
  ctx.beginPath();
  for (i = 0; i < 4; i++) {
    if (i == 0) {
      ctx.moveTo(xPos, points[i]);
    } else {
      ctx.lineTo(xPos, points[i]);
    }
    xPos += horizSpace;
  }
  ctx.stroke();
  ctx.closePath();
  var xPos = graphPadding * 2;
  for (i = 0; i < 4; i++) {
    drawCircle(ctx, xPos, points[i], 4, colours[i]);
    xPos += horizSpace;
  }
  var availableWidth = cWidth - (graphPadding * 6);
  var barWidth = availableWidth / 4;
  var maxHeight = cHeight - (graphPadding * 3);
  var xPos = graphPadding * 2;
  for (i = 0; i < 4; i++) {
    // Work out height
    var h = maxHeight * ($("#Slider1" + (i + 1)).slider("value") /
      100);
    var yPos = cHeight - h - (graphPadding * 2);
    ctx.fillStyle = colours[i];
    ctx.fillRect(xPos, yPos, barWidth, h);
    xPos += barWidth + graphPadding;
  }
}

function clearCanvas(element) {
  $(element).attr("width", $(element).attr("width"));
}

function drawCircle(ctx, x, y, radius, colour) {
  ctx.fillStyle = colour;
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2, true);
  ctx.fill();
}

具有与以下相同的效果：

var canvas = document.getElementById("Graph1");
var ctx = canvas.getContext("2d");

由于jQuery使用对象，因此可以调用第一个索引并获取DOM元素

利用
.each（）
我们可以增加或减少点和滑块的数量。这使代码更便于移植

您还可以使用
数据
属性来存储更多信息。例如：

var canvas = $("#Graph1");
var ctx = canvas[0].getContext("2d");

希望对您有所帮助。
欢迎使用堆栈溢出。请包括您可能发现的任何控制台错误以及您正在使用的各种javascript库。查看HTML元素也可能会有所帮助。看起来您缺少了一个
}
第一个函数或最后一个函数。解决了更多问题并应用了更多主题：