【问题标题】:Highcharts PieChart Legend paging faultyHighcharts饼图图例分页错误
【发布时间】:2015-12-18 14:00:39
【问题描述】:

使用渲染良好的 Highcharts 创建一些饼图,但图例不会在页面之间交换。它会更新页码(例如 1/4 -> 2/4 -> 3/4),但图例的内容不会改变。

我使用了来自http://jsfiddle.net/qegmnsm7/ 的代码,只是将我自己的数据传入其中;给出这个代码:

var areaOptions = {
    chart: {
        renderTo: 'areaPie',
        defaultSeriesType: 'pie',
        width: 900,
        height: 600
    },
    title: {
        text: "Test Pie Chart."
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        y: 30,
        navigation: {
            activeColor: '#3E576F',
            animation: true,
            arrowSize: 12,
            inactiveColor: '#CCC',
            style: {
                fontWeight: 'bold',
                color: '#333',
                fontSize: '12px'    
            }
        }
    },
    exporting: {
        buttons: {
            printButton: {
                enabled: false
            }
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                color: '#000000',
                connectorColor: '#000000',
                formatter: function () {
                    return Math.round(this.percentage) + '% (' + this.y + ')';
                }
            },
            showInLegend: true
                , point: {
                    events: {
                        legendItemClick: function () {
                            filterList(this);
                            this.select();
                            return false;
                        },
                        click: function () { filterList(this); }
                    }
                }
        },
        series: [{
            type: 'pie',
            name: 'Banana',
            data: []
        }]
    }
};
areaOptions.series = @Html.Raw(ViewBag.Area);
var areaChart = new Highcharts.Chart(areaOptions);
areaChart.render();

给出这个:

但是,单击“向下”箭头后,图例保持不变 - 除了 1/2 更改为 2/2。

我在我的应用程序中使用了上面链接的示例代码,它运行良好;因此,我希望只需更新数据输入即可工作。但是有些事情搞砸了,我找不到任何其他用户的问题或谷歌链接来提供帮助。

我做错了什么导致图例无法正确分页?

编辑:Here 是一个 JSFiddle,准确地表达了我的意思。

【问题讨论】:

  • 你能在 JSFiddle 中重现你的问题吗?您发布的那个工作正常,我无法重现该问题。浏览器控制台(开发者工具)是否有错误?
  • 另一方面,如果你有一个饼图有这么多切片,以至于图例需要分页(考虑到即使是一个结构良好的饼图也存在固有的失败),你期望用户有什么价值可以可能从这样的图表中得到吗?
  • @jlbriggs 这是我经理的要求 - 我只是提供他的要求:)
  • @KacperMadej 我现在就去做。
  • @KacperMadej 忘了说开发者工具没有错误。

标签: javascript html highcharts pie-chart


【解决方案1】:

areaChart.render(); 不是官方 API 的一部分,导致图例分页出现问题。删除这部分代码将解决您的问题。

JSFiddle 中的固定代码:https://jsfiddle.net/kfdoxscx/9/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-01-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多