javascript - 设置饼图绘图选项的格式

标签 javascript jquery highcharts

我这里有这个 fiddle http://jsfiddle.net/rg6wczo6/ 。我基本上正在格式化绘图选项以以 m 和 k 格式显示我的数字,highcharts 对 y 轴所做的操作。我也想将图表作为饼图,但我收到一条错误消息,提示无法读取未定义的属性“tickInterval”,这表明 yAxis。 有人可以告诉我如何使饼图的格式也适用吗?

var options = {
                chart: {
                      renderTo: 'drillDown'
                },
                title: {
                    text: 'Healthcare Operations'
                },
                subtitle: {
                    text: 'Facility Revenue'
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true,

                            formatter:
                                function () {                                

                                        var ret = '',
                                            multi,
                                            axis = this.series.yAxis,
                                            numericSymbols = ['k', 'M', 'G', 'T', 'P', 'E'],
                                            i = numericSymbols.length;
                                        while (i-- && ret === '') {
                                            multi = Math.pow(1000, i + 1);
                                            if (axis.tickInterval >= multi && numericSymbols[i] !== null) {
                                                ret = Highcharts.numberFormat(this.y / multi, -1) + numericSymbols[i];
                                            }
                                        }
                                        return this.point.name + ":" + ret;

                                }
                        }
                    }
                },

                series: [{
                    name: 'Facility',
                    colorByPoint: true,
                    data: mainData
                }],
                drilldown: {
                    series: [ {
                        name: 'Jacobs Medical Park',
                        id: 'Jacobs Medical Park',
                        data: jacobsMedicalParkData
                    }, {
                        name: 'Blue Star',
                        id: 'Blue Star',
                        data: blueStarData
                    }, {
                        name: 'Cigna',
                        id: 'Cigna',
                        data: cignaData
                    },
                    {
                        name: 'Blue Cross',
                        id: 'Blue Cross',
                        data: blueCrossData
                    }
                    ]
                }
            }
            options.chart.renderTo = 'drillDown';
            options.chart.type = 'column';
            var chart1 = new Highcharts.Chart(options);

            // Pie
            options.chart.renderTo = 'drillDown1';
            options.chart.type = 'pie';
            var chart2 = new Highcharts.Chart(options);

谢谢

最佳答案

使用发现的函数here将数字转换为公制符号字符串:

function intToString (value) {
    var suffixes = ["", "k", "m", "b","t"];
    var suffixNum = Math.floor((""+value).length/3);
    var shortValue = parseFloat((suffixNum != 0 ? (value / Math.pow(1000,suffixNum)) : value).toPrecision(2));
    if (shortValue % 1 != 0)  shortNum = shortValue.toFixed(1);
    return shortValue+suffixes[suffixNum];
}

你可以这样做:

plotOptions: {
  pie: {
    dataLabels: {
      enabled: true,
      formatter: function() {
                console.log(this);
        return '<b>' + this.key + '</b>: ' + intToString(this.y);
      }
    }
  },

您可以通过调用此函数来替换条形图的现有代码,以及代码的重用/可读性。

示例jsFiddle .

关于javascript - 设置饼图绘图选项的格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35946887/

相关文章:

javascript - ReactJS - 组件外部的全局状态

javascript - 如何使用for循环创建多个highchart并在HTML页面中打印?

php - 获取统计数据并在图表中显示 - PHP/HighCharts

javascript - Facebook 点赞按钮并添加评论事件

javascript - 使用 Cordova、javascript 增强现实

PHP CodeIgniter 框架中的 Javascript 可用性验证

javascript - 如何在不点击或提交的情况下实时更新数据

jquery ajax 正在将 ruby​​ 对象数组转换为散列

javascript - Highcharts 使用 json 将点添加到折线图

javascript - 关于 Javascript getElementsByTagName 方法的问题