单击将标签锚定到 Chart.js 中的相应部分 HTML

Question

我有一个图表，当单击每个图表标签时，滚动会移动到 HTML 中的相应部分。我正在使用 Chart.js，单击标签时我唯一能做的就是发出警报。

Javascript

// Chart
var barData = {
    labels: ['Red', 'Orange', 'Yellow', 'Green']
};


var pieData = [{
    value: 40,
    color: "#ad1f27",
    highlight: "#ad474c",
    label: "Red"
}, {
    value: 40,
    color: "#c26828",
    highlight: "#c27e4d",
    label: "Orange"
}, {
    value: 10,
    color: "#c3b830",
    highlight: "#c3bc6b",
    label: "Yellow"
}, {
    value: 10,
    color: "#14773c",
    highlight: "#2da15b",
    label: "Green"
}];

var options = {
    segmentShowStroke: false
};

Chart.defaults.global.responsive = true;

var context = document.getElementById('chartDonnut').getContext('2d');
var skillsChart = new Chart(context).Doughnut(pieData, options);

$("#chartDonnut").click(function(evt) {
    var activePoints = skillsChart.getSegmentsAtEvent(evt);
    var url = activePoints[0].label + activePoints[0].value + activePoints[0].x + activePoints[0].y;
    alert(url);
});

jsfiddle

Answer 1

要访问所选字段，只需使用内部链接即可。

您需要将 html 添加修改为如下所示：

<canvas id="chartDonnut"></canvas>
<div id="red" class="redSection">
    <p>Red Section</p>
</div>
<div id="orange" class="orangeSection">
    <p>Orange Section</p>
</div>
<div id="yellow" class="yellowSection">
    <p>Yellow Section</p>
</div>
<div id="green" class="greenSection">
    <p>Green Section</p>
</div>

而对于 jquery 代码，它将是这样的：

// Chart
var barData = {
    labels: ['Red', 'Orange', 'Yellow', 'Green']
};


var pieData = [{
    value: 40,
    color: "#ad1f27",
    highlight: "#ad474c",
    label: "Red"
}, {
    value: 40,
    color: "#c26828",
    highlight: "#c27e4d",
    label: "Orange"
}, {
    value: 10,
    color: "#c3b830",
    highlight: "#c3bc6b",
    label: "Yellow"
}, {
    value: 10,
    color: "#14773c",
    highlight: "#2da15b",
    label: "Green"
}];

var options = {
    segmentShowStroke: false
};

Chart.defaults.global.responsive = true;

var context = document.getElementById('chartDonnut').getContext('2d');
var skillsChart = new Chart(context).Doughnut(pieData, options);

$("#chartDonnut").click(function(evt) {
    var activePoints = skillsChart.getSegmentsAtEvent(evt);
    var url = activePoints[0].label + activePoints[0].value + activePoints[0].x + activePoints[0].y;
    if(activePoints[0].label=="Red"){
       window.location="#red";
    }
    if(activePoints[0].label=="Orange"){
       window.location="#orange";
    }
    if(activePoints[0].label=="Yellow"){
       window.location="#yellow";
    }
    if(activePoints[0].label=="Green"){
       window.location="#green";
    }
});

Answer 2

这是点击处理程序中应该包含的修改后的数据：

$("#chartDonnut").click(function(evt) {
    var sector = skillsChart.getSegmentsAtEvent(evt)[0].label;
    document.getElementsByClassName(sector.toLowerCase()+'Section')[0].scrollIntoView();
});

工作 jsfiddle：http://jsfiddle.net/1efr492j/1/

请注意，它会跳转到其他位置，而不是平滑地滚动到那里。如果您希望它平滑滚动，请查看此处的一些建议：scrollintoview animation

另一个答案也可以，但这种方法侵入性较小，更改的代码也较少

单击将标签锚定到 Chart.js 中的相应部分 HTML

Click anchors the label to its respective section HTML in Chart.js

javascript

chart.js