Question

我正在尝试使用chartjs创建一个简单的圆环图。我一直在挖掘文档和堆栈（当然），但我找不到它。
这是我的代码：https://jsfiddle.net/zyqtyna7/1/

<div class="place-for-chart">
    <canvas id="myChart"></canvas>
</div>

<div class="description">
    <p class="first hide">I'm description to no. 1 and I was hide</p>
    <p class="second hide">I'm description to no. 2 and I was hide</p>
    <p class="third hide">I'm description to no. 3 and I was hide</p>
</div>
<script>
    var data = {
        datasets: [{
            data: [20, 20, 20],
            backgroundColor: ["#27ae60", "#95a5a6", "#488a99"]
            }],
        labels: ["first", "second", "third"],
    };

$(document).ready(
   function() {
        var canvas = document.getElementById("myChart");
        var ctx = canvas.getContext("2d");

        var CompetenceChart = new Chart(ctx, {
            type: 'doughnut',
            data: data 
});
})

我不确定，但我认为最大的问题是：我如何定位图表的特定部分（然后用它做一些事情）？我问这个，因为我的项目要求：

段落中的说明将会显示（如何定位此段？）;
工具提示将只有标签的名称（没有值）（我无法破译文档）;
图表动画应该通过滚动触发（滚动后片段会按顺序出现 - 甚至可能吗？）

我会非常感谢任何洞察力 - 我被困住了！

Answer 1

我设法做了3个中的2个...我找到了关于如何做第三个的文档..但是我无法使其工作：/ ....（我会在我有点时再试一次更多的时间）。

所以这里是JSfiddle的修改：

1：鼠标单击时显示数据 2：在顶部标签上显示，但是当您单击时，您将看不到任何标签，只有黑色标记

JSFIDDLE

那我该怎么办？

options: {
    // This chart will not respond to mousemove, etc
    events: ['click'],
    tooltips: {
       callbacks: {
          label: function(tooltipItem) 
          {
             return tooltipItem.yLabel;
          }
                  }
              }
    }

我添加了带有这些代码的选项部分。

事件：['click'] 会在您点击图表的一部分而不是将其悬停时显示标签。

工具提示，回调“关闭”，在鼠标点击时显示标签。

对于你问的其他部分，当你滚动到图表所在的部分时显示动画我发现这2个链接告诉你如何这样做（我无法使它工作，但我会我有更多时间和更新时再试一次。

Link1

Link2

如果这是您想知道的，请告诉我！干杯！

Answer 2

OMG！现在我知道了。我花了这么多时间，但是很明显！这是我的新工作代码：https://jsfiddle.net/m954jto4/ Chartjs的文档和相同的基本js脚本 - 这就是我所需要的（对我来说很羞耻！）。

<div class="place-for-chart">
    <canvas id="myChart"></canvas>
</div>

<div class="description">
  <p class="first hidden" id="hide1">I'm description to no. 1 and I was hide</p>
  <p class="first hidden" id="hide2">I'm description to no. 2 and I was hide</p>
  <p class="first hidden" id="hide3">I'm description to no. 3 and I was hide</p>
</div>

var data = {
    datasets: [{
            data: [20, 20, 20],
            backgroundColor: ["#27ae60", "#95a5a6", "#488a99"]
            }],
        labels: ["first", "second", "third"],
};


$(document).ready(
function() {
    var canvas = document.getElementById("myChart");
    var ctx = canvas.getContext("2d");
    var myNewChart = new Chart(ctx, {
        type: 'doughnut',
        data: data,
        options: {
            legend: {
                display: true,
                onClick: (e) => e.stopPropagation(),
                position: 'left',
                labels: {
                    fontSize: 20
                    }
                },

            tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            var label = data.labels[tooltipItem.index];
                            return label;
                                } 
                            }
                    },
            cutoutPercentage: 65
            }
        }
        );

canvas.onclick = function(event) {
    var activePoints = myNewChart.getElementsAtEvent(event);
    var hiddenparagraph1 = document.getElementById("hide1");
    var hiddenparagraph2 = document.getElementById("hide2");
    var hiddenparagraph3 = document.getElementById("hide3");

    if (activePoints.length > 0) {
        var clickedSegmentIndex = activePoints[0]._index;

    if (clickedSegmentIndex==0) {
        hiddenparagraph1.classList.remove("hidden");
    }
    else if(clickedSegmentIndex==1) {
        hiddenparagraph2.classList.remove("hidden");
    }
    else {
    hiddenparagraph3.classList.remove("hidden");
    }
    }


    };
    }
);

圆环图 - 与图表特定部分的互动

2 个答案: