Question

我正在尝试创建一个连接数据的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) {

    }
     });

Answer 1

如果没有完整的例子，那么花费时间来确定错误。我必须定义graphPadding和colours。我也发现了许多语法错误。

以下是一个工作示例：https://jsfiddle.net/Twisty/pfub6haf/

<强> 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>

<强> CSS

.ui-widget-header {
  padding: .5em;
}

.slide {
  margin: .5em;
}

<强>的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();
}

使用class属性，我可以更轻松地使用选择器并迭代每个滑块。由于我将相同的代码应用于所有4个，因此我可以使用$(".slide")作为选择器。

由于你正在使用jQuery，我在你的绘图代码中做了一些小改动。例如：

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

具有与以下相同的效果：

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

由于jQuery使用Objects，您可以调用第一个索引并获取DOM元素。

利用.each()我们可以增长到更多或更少的点和滑块。它使代码更具可移植性。

您还可以使用data属性来存储更多信息。例如：https://jsfiddle.net/pfub6haf/3/

希望有所帮助。

Jquery滑块不能使用图形

1 个答案: