【问题标题】:Show Pie Chart Name as Title将饼图名称显示为标题
【发布时间】:2012-09-11 18:25:14
【问题描述】:

有没有一种方法可以在饼图的顶部、底部、右侧或左侧显示饼图名称,而无需使用标签,就像他们在 this highcharts 演示中使用的那样:

        labels: {
            items: [{
                html: '<b>Total fruit consumption<b>',
                style: {
                    left: '40px',
                    top: '8px',
                    color: 'black'
                }
            }]
        }

标签具有以像素为单位的绝对位置,对于饼图,我使用百分比。
当调整大小时,标签会停留在同一个地方并且馅饼会移动,并且我无法获得相同的相对位置(百分比)。 示例饼:

{ data: [{ color: '#31B7C9', name: 'Slice 1', y: 1266364.92333333 }, { color: '#9ED93E', name: 'Slice 2', y: 7284620.73 }, { color: '#DABF12', name: 'Slice 4', y: 2330663.39333333 }], name: 'Pie Chart Name', type: 'pie', center: ["25%", "25%"], showInLegend: true, size: "20%", dataLabels: { enabled: false }}

知道如何将饼图名称显示为标题吗?

jsFiddle here 中的示例。

提前谢谢你

【问题讨论】:

  • 是的,小提琴(不是 highchart 演示)会更好。如果您可以分享有关如何在不同容器尺寸下绘制饼图的代码,也许我们可以制定一个公式来计算位置

标签: javascript highcharts


【解决方案1】:

编辑: 因此,看起来您希望拥有与演示中相同的图表,而不仅仅是饼图。如果是这种情况,我下面的答案将失败。您将需要使用标签并定位它们。

----保留以下代码以供将来参考---

是的, 使用标题属性。 此处示例:http://jsfiddle.net/wergeld/svkmM/

title: {
    text: 'A Title!'
}

【讨论】:

  • 不是主图,是组合图。只有饼图才需要标题。如果我错了,请纠正我@Miguel
  • 啊,在那种情况下,它必须是标签。主图表使用 title 属性。
  • 是的,只有饼图需要标题 @JugalThakkar,使用标签的问题是我不能像标题那样动态地将它们放在饼图的左上角或右下角。
  • @MiguelMarques 这是真的。除非您始终将辅助饼图在所有版本的图表中保持在相同位置,否则您将始终必须生成 x/y 位置。如果您在主图表周围移动饼图,您也必须移动标签。
【解决方案2】:

我找到了一个插件,可以显示饼图标题here

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-09-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多