charts - Chart.js 极坐标图

Question

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

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

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

<html>

<head>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.0/rangeslider.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
</head>
<main class="container">
  <div class="sliderHolder">
    <div class="wheelCat">Citizenship</div>
    <div class="sliderAll">
      <div class="sliderCitizenship">
        <input type=range value=1 min=0 max=8 step=1 id="Citizenship">
      </div>
    </div>
    <br>

    <div class="wheelCat">People</div>
    <div class="sliderAll">
      <div class="sliderPeople">
        <input type=range value=1 min=0 max=8 step=1 id="People">
      </div>
    </div>
    <br>

    <div class="wheelCat">Growth</div>
    <div class="sliderAll">
      <div class="sliderGrowth">
        <input type=range value=1 min=0 max=8 step=1 id="Growth">
      </div>
    </div>
    <br>

    <div class="wheelCat">Management</div>
    <div class="sliderAll">
      <div class="sliderManagement">
        <input type=range value=1 min=0 max=8 step=1 id="Management">
      </div>
    </div>
    <br>

    <div class="wheelCat">Relationships</div>
    <div class="sliderAll">
      <div class="sliderCitizenship">
        <input type=range value=1 min=0 max=8 step=1 id="Citizenship">
      </div>
    </div>
    <br>

    <div class="wheelCat">Health</div>
    <div class="sliderAll">
      <div class="sliderHealth">
        <input type=range value=1 min=0 max=8 step=1 id="Health">
      </div>
    </div>
    <br>

    <div class="wheelCat">Wealth</div>
    <div class="sliderAll">
      <div class="sliderWealth">
        <input type=range value=1 min=0 max=8 step=1 id="Wealth">
      </div>
    </div>
    <br>

    <div class="wheelCat">Joy</div>
    <div class="sliderAll">
      <div class="sliderJoy">
        <input type=range value=1 min=0 max=8 step=1 id="Joy">
      </div>
    </div>
    <br>

  </div>
  <div style="float:left;width:80%;">
    <canvas id="polarChart"></canvas>
  </div>
</main>

</html>

标签： chartschart.js

Answer 1

这就是问题所在：

updateChart(0, value);

这负责更新数据数组位置 0中的数据。当您将其更改为时，updateChart(1, value);它将更新People类别数据。更改代码，以便根据单击的滑块动态设置参数。

--== 下面更新==--

查找我发现 rangeSlider 标识符的代码。非常适合您的情况。

我不知道这是否是传递此信息的正确方式，但它似乎有效。

利用updateChart(this.identifier.slice(-1), value);

快速解释 - 每个对象都有标识符，例如

identifier : "js-rangeslider-0"

所以我正在获取当前对象（this），进入.identifier并获取此字符串的最后一个字符.slice(-1)。