Chart.js极坐标图

Question

任何人都知道如何在此codepen示例中获取滑块来操作其类别的图表数据？目前只有公民身份类别受到影响。

＆＃13;

＆＃13;

        1
      / | \
    2   3   4
  / |   |
 5  6   7

＆＃13;

var valueBubble = '<output class="rangeslider__value-bubble" />';

function updateValueBubble(pos, value, context) {
  pos = pos || context.position;
  value = value || context.value;
  var $valueBubble = $('.rangeslider__value-bubble', context.$range);
  var tempPosition = pos + context.grabPos;
  var position = (tempPosition <= context.handleDimension) ? context.handleDimension : (tempPosition >= context.maxHandlePos) ? context.maxHandlePos : tempPosition;

  if ($valueBubble.length) {
    $valueBubble[0].style.left = Math.ceil(position) + 'px';
    $valueBubble[0].innerHTML = value;
  }
}

$('input[type="range"]').rangeslider({
  polyfill: false,
  onInit: function() {
    this.$range.append($(valueBubble));
    updateValueBubble(null, null, this);
  },
  onSlide: function(pos, value) {
    updateValueBubble(pos, value, this);
    updateChart(0, value);
  }
});

function updateChart(location, value) {
  myChart.data.datasets[0].data[location] = value;
  myChart.update();
}

var ctx = document.getElementById("polarChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'polarArea',
  data: {
    labels: [
      "Citizenship",
      "People",
      "Growth",
      "Management",
      "Relationships",
      "Health",
      "Wealth",
      "Joy"
    ],
    datasets: [{
      backgroundColor: [
        "#00A3CE",
        "#22CBED",
        "#EB67A2",
        "#FDA9ED",
        "#EC5B22",
        "#F78F21",
        "#148F1E",
        "#1EC428"
      ],
      data: [4, 6, 6, 2, 4, 2, 2, 7],
    }],
  },
  options: {

    elements: {
      arc: {
        borderColor: "rgba(255,255,255,1)",
        borderWidth: 2
      }
    },
    scale: {
      ticks: {
        beginAtZero: true,
        max: 8,
        min: 0,
        stepSize: 1,
        fontFamily: "'Lato', sans-serif",
        fontSize: 18,
        fontColor: "#000",
        display: false
      },
      gridLines: {
        lineWidth: 1,
        color: "#999"
      },
    },
    layout: {
      padding: {
        left: 100,
        right: 200,
        top: 10,
        bottom: 10
      }
    },
    legend: {
      display: true,
      position: "right",
      labels: {
        fontFamily: "'Lato', sans-serif",
        fontSize: 18,
        fontColor: "#000"
      }
    }
  }
});

＆＃13;

@import "compass/css3";
body {
  padding: 50px 0;
}

.sliderHolder {
  width: 20%;
  //height:400px;
  float: left;
  //border:1px solid;
  //display:none;
}

.wheelCat {
  width: 100px;
  float: left;
  //border:1px solid;
  padding-top: 55px;
  text-align: right;
  padding-right: 10px;
  font-family: "Lato", san-serif;
  font-size: 13px;
}

.sliderAll {
  height: 100px;
  width: 50%;
  padding-top: 55px;
  //border:1px solid;
  float: left;
}

.sliderCitizenship .rangeslider__fill {
  background-color: #00A3CE;
}

.sliderPeople .rangeslider__fill {
  background-color: #22CBED;
}

.sliderGrowth .rangeslider__fill {
  background-color: #EB67A2;
}

.sliderManagement .rangeslider__fill {
  background-color: #FDA9ED;
}

.sliderRelationships .rangeslider__fill {
  background-color: #EC5B22;
}

.sliderHealth .rangeslider__fill {
  background-color: #F78F21;
}

.sliderWealth .rangeslider__fill {
  background-color: #148F1E;
}

.sliderJoy .rangeslider__fill {
  background-color: #1EC428;
}

.rangeslider__value-bubble {
  display: none;
}

*,
*:before,
*:after {
  @include box-sizing(border-box);
}

.rangeslider__value-bubble {
  border: 1px solid #ccc;
  display: block;
  padding: 5px;
  position: absolute;
  bottom: 100%;
  margin-bottom: 25px;
  width: 100px;
  margin-left: -50px;
  text-align: center;
  @include border-radius(5px);
  font-family: "Lato", san-serif;
  font-size: 13px;
  &:before,
  &:after {
    border-width: 11px;
    border-style: solid;
    border-color: transparent;
    content: "";
    display: block;
    margin: auto;
    width: 10px;
    position: absolute;
    left: 0;
    right: 0;
  }
  &:before {
    border-top-color: #ccc;
    border-bottom-width: 0;
    bottom: -11px;
  }
  &:after {
    border-top-color: #fff;
    border-bottom-width: 0;
    bottom: -10px;
  }
}

＆＃13;

＆＃13;

＆＃13;