Question

我有一个项目，我希望有几个页面/报告与饼图相辅相成。我已经在应用程序中使用了其他ChartJS驱动的图表并且喜欢它们，但是饼图非常没用，因为它显然没有默认的标签。

那么，是否有任何可行的解决方案来添加它们而不必在ChartJS核心文件中乱七八糟？我已经偶然发现了使用谷歌的各种“解决方案”，但它们已经过时（提及不再存在的部分代码）或者需要在核心文件中进行编辑。我正在使用最新的ChartJS版本1.0.1。

Answer 1

<强> JSFiddle

这对我来说也很难找到。由于需要在同一页面上放置多个图表，我的解决方案有点复杂。（出于这个原因，我的上下文和数据变量的命名与chart.js文档中的命名略有不同。）

基本上，我必须添加两件事。首先，一个div来保存图例，然后添加一行来告诉chart.js在那里建立一个图例。第二行必须在声明新图表的变量之后（我根据文档标记了它：chartjs.org/docs/#doughnut-pie-chart-example-usage）

这里是div：

<div class="chart">
    <canvas id="property_types" class="pie"></canvas>
    <div id="pie_legend"></div>
</div>

这是JS：

// jQuery
$("#pie_legend").html(propertyTypes.generateLegend());
// JavaScript
document.getElementById('pie_legend').innerHTML = propertyTypes.generateLegend();

我还没有让工具提示在悬停在li元素上时出现，但我希望答案出现在这个GitHub问题中：github.com/nnnick/Chart。 js / issues / 522我找到了解决同样问题的方法！

Answer 2

请检查是否对您有帮助：

$scope.options = {
    tooltipEvents: [],
    showTooltips: true,
    tooltipCaretSize: 0,
    onAnimationComplete: function () {
        this.showTooltip(this.segments, true);
    },
}

如何获取ChartJS饼图段上的标签

2 个答案: