以编程方式突出显示区域 - Chart.js

Question

我正在使用 Chart.js（圆环图），我想问一下是否可以选择以编程方式突出显示区域？我的意思是 - 当我点击一个按钮时，特定区域将突出显示。

感谢您的回复。

Answer 1

只需遍历甜甜圈段，根据标签进行匹配并交换/恢复填充颜色。

function highlight(label) {
    myDoughnutChart.segments.forEach(function (segment, i) {
        if (segment.label == label) {
            if (segment.fillColor == segment.highlightColor)
                segment.restore(["fillColor"]);
            else
                segment.fillColor = segment.highlightColor;
            myDoughnutChart.render();                    
        }
    })
}

Fiddle - http://jsfiddle.net/35of1Lzg/

我已经通过设置 tooltipEvents = [] 禁用了工具提示和工具提示突出显示，但如果你想要它们回来，你可以随时将其从选项中删除，但是悬停/鼠标移开和单击按钮会做同样的事情.

要在突出显示时也弹出工具提示，请使用此

function highlight(label) {
    myDoughnutChart.segments.forEach(function (segment) {
        if (segment.label == label) {
            if (segment.fillColor == segment.highlightColor)
                segment.restore(["fillColor"]);
            else 
                segment.fillColor = segment.highlightColor;

            myDoughnutChart.render()
        }
    })

    var activeSegements = [];
    myDoughnutChart.segments.forEach(function (segment) {
        if (segment.fillColor === segment.highlightColor) {
            activeSegements.push(segment)
        }
    });

    myDoughnutChart.showTooltip(activeSegements, true)
}

http://jsfiddle.net/jdr5381e/

Answer 2

仅供参考，小提琴不再有效，您需要替换指向 Chart.min.js 的链接我用这些来让它们工作：https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js

以编程方式突出显示区域 - Chart.js

Highlight area programmatically - Chart.js

charts

chart.js