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

小提琴 - 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

FYI小提琴不再有效，你需要替换Chart.min.js的链接我使用这些来让它们工作：https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js

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

2 个答案: