【问题标题】:How to get labels on ChartJS Pie chart segments如何在 ChartJS 饼图段上获取标签
【发布时间】:2024-01-16 12:00:01
【问题描述】:

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

那么,是否有任何可行的解决方案来添加它们而不必在 ChartJS 核心文件中乱七八糟?我已经偶然发现了使用 Google 的各种“解决方案”,但它们要么已经过时(提到替换不再存在的部分代码),要么需要在核心文件中进行编辑。我使用的是最新的 ChartJS 版本,1.0.1。

【问题讨论】:

    标签: charts label chart.js


    【解决方案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 在哪里我找到了解决您同样问题的方法!

    【讨论】:

    • 这是用于生成图例,而不是标签。虽然我之前也遇到过不少麻烦,但由于文档中的 ChartJS 的默认配置在使用饼图时会产生错误(准确地说是 legendTemplate 属性)。我需要的是饼图段上的标签,就像这个 Google Chart API 示例如何将百分比显示为标签一样:developers.google.com/chart/interactive/docs/gallery/piechart
    • 我误解了这个问题 - 抱歉。我明白你在说什么...... Google Chart API 在确定文本标签是否有空间方面做得很好。我不确定为什么 chart.js 不这样做。再次抱歉,造成误解。
    • 一个可能的解决方案,但我没试过*.com/questions/16590301/…
    • 嗯,就是这样。该链接是我偶然发现的众多链接之一,但该解决方案似乎已过时。我再也找不到核心 ChartJS 文件中引用的代码行,更不用说必须编辑核心文件是一个肮脏的快速修复;毕竟,一旦 ChartJS 得到更新,这个修复将再次被覆盖。
    • 你说得对。那个 hack 是针对以前版本的,在最新版本中变得无法使用。看起来开发人员最近将此指定为增强功能github.com/nnnick/Chart.js/issues/735
    【解决方案2】:

    如果对您有帮助,请勾选:

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

    【讨论】: