Question

我想通过允许用户单击切片向下钻取来使我的条形图具有交互性。我相信这样做的方法是在画布上创建一个onclick处理程序，并使用getSegmentsAtEvent（）确定单击了哪个切片。我在饼图中看到了一个示例，但是在条形图中却没有。有什么想法吗？

这适用于Pie类型，但不适用于Bar类型，

Chart.types.Pie.extend({
  name: "PieUnique",
  addData: function(segment, atIndex, silent) {
    var index = atIndex || this.segments.length;
    this.segments.splice(index, 0, new this.SegmentArc({
      value: segment.value,
      outerRadius: (this.options.animateScale) ? 0 : this.outerRadius,
      innerRadius: (this.options.animateScale) ? 0 : (this.outerRadius / 100) * this.options.percentageInnerCutout,
      fillColor: segment.color,
      highlightColor: segment.highlight || segment.color,
      showStroke: this.options.segmentShowStroke,
      strokeWidth: this.options.segmentStrokeWidth,
      strokeColor: this.options.segmentStrokeColor,
      startAngle: Math.PI * this.options.startAngle,
      circumference: (this.options.animateRotate) ? 0 : this.calculateCircumference(segment.value),
      label: segment.label,
      //add option passed
      id: segment.id
    }));
    if (!silent) {
      this.reflow();
      this.update();
    }
  },
});

var pieData = [{
  value: 300,
  color: "#F7464A",
  highlight: "#FF5A5E",
  label: "Red",
  id: "1-upi"
}, {
  value: 50,
  color: "#46BFBD",
  highlight: "#5AD3D1",
  label: "Green",
  id: "2-upi"
}, {
  value: 100,
  color: "#FDB45C",
  highlight: "#FFC870",
  label: "Yellow",
  id: "3-upi"
}, {
  value: 40,
  color: "#949FB1",
  highlight: "#A8B3C5",
  label: "Grey",
  id: "4-upi"
}, {
  value: 120,
  color: "#4D5360",
  highlight: "#616774",
  label: "Dark Grey",
  id: "5-upi"
}];

var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx).PieUnique(pieData);

document.getElementById("chart-area").onclick = function(evt) {
  var activePoints = window.myPie.getSegmentsAtEvent(evt);

  if (activePoints[0]) {
    var label = activePoints[0].label;
    var value = activePoints[0].value;
    var id = activePoints[0].id;

    alert('label = ' + label + '   |   value = ' + value + '   |   id = ' + id);
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<canvas id="chart-area"></canvas>

我希望创建与Bar类型相同的功能。

Answer 1

首先值得一提的是您使用的版本是旧的1.1。

这里有两个问题，要更改图表类型，您首先需要更改设置pieData变量的方式，之后getSegmentsAtEvent事件仅适用于饼图类型，即适当的事件是getBarsAtEvent。

这是一个可行的示例（请注意，我没有使用原始图表数据）：

Chart.types.Bar.extend({
  name: "PieUnique",
  addData: function(segment, atIndex, silent) {
    var index = atIndex || this.segments.length;
    this.segments.splice(index, 0, new this.SegmentArc({
      value: segment.value,
      outerRadius: (this.options.animateScale) ? 0 : this.outerRadius,
      innerRadius: (this.options.animateScale) ? 0 : (this.outerRadius / 100) * this.options.percentageInnerCutout,
      fillColor: segment.color,
      highlightColor: segment.highlight || segment.color,
      showStroke: this.options.segmentShowStroke,
      strokeWidth: this.options.segmentStrokeWidth,
      strokeColor: this.options.segmentStrokeColor,
      startAngle: Math.PI * this.options.startAngle,
      circumference: (this.options.animateRotate) ? 0 : this.calculateCircumference(segment.value),
      label: segment.label,
      //add option passed
      id: segment.id
    }));
    if (!silent) {
      this.reflow();
      this.update();
    }
  },
});

var pieData = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
      label: "My First dataset",
      fillColor: "rgba(220,220,220,0.5)",
      strokeColor: "rgba(220,220,220,0.8)",
      highlightFill: "rgba(220,220,220,0.75)",
      highlightStroke: "rgba(220,220,220,1)",
      data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
      label: "My Second dataset",
      fillColor: "rgba(151,187,205,0.5)",
      strokeColor: "rgba(151,187,205,0.8)",
      highlightFill: "rgba(151,187,205,0.75)",
      highlightStroke: "rgba(151,187,205,1)",
      data: [28, 48, 40, 19, 86, 27, 90]
    }
  ]
};

var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx).PieUnique(pieData);

document.getElementById("chart-area").onclick = function(evt) {
  var activePoints = window.myPie.getBarsAtEvent(evt);

  if (activePoints[0]) {
    var label = activePoints[0].label;
    var value = activePoints[0].value;
    var id = activePoints[0].id;

    alert('label = ' + label + '   |   value = ' + value + '   |   id = ' + id);
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<canvas id="chart-area"></canvas>

Chartjs条形段中的唯一标识符？

1 个答案: