Question

我正在使用HighCharts来显示项目的百分比，这些百分比被下钻到变量中，这些变量构成了百分比！

我会给我的代码：

@Poller

JSON示例：

fraction.json

$(function () {

    // Create the chart
    var options = {
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Comparison'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                enabled: true,
                text: 'Percentages',
                style: {
                    fontWeight: 'normal'
                }
            },
            labels: {
                format: '{value}%'
            }
        },
        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}%'
                }
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },
        series: [{
            name: '',
            colorByPoint: true,
            data: []
        }],
        credits: {
            enabled: false
        },
        drilldown: {
            series: [{
                name : '',
                id: '',
                data: []
            }]
        }
    };
    $.getJSON('/uploads/fraction.json', function (list) {
        options.series = list;

    });
    $.getJSON('/uploads/drilldown.json', function (list2) {
        options.drilldown.series = list2;
        var chart = new Highcharts.Chart(options);
    });
});

drilldown.json

[{"name":"","colorByPoint":true,"data":[{"name":1,"y":80,"drilldown":1},{"name":2,"y":87,"drilldown":2},{"name":3,"y":105.71428571429,"drilldown":3},{"name":5,"y":"","drilldown":5},{"name":6,"y":53.160248409091,"drilldown":6}]}]

我希望图表在首次加载图表时显示列上方和yAxis上的百分比，但是在激活下钻时显示绝对值。直到现在我还没有成功。你可以帮帮我吗？

Answer 1

有两种方法可以进行这些更改 - 静态和动态方式。静态方式 - 为下钻系列定义数据标签和工具提示选项。

动态方式 - 在钻取/钻取事件中应用选项。

events: {
    drilldown: function(options) {
      this.yAxis[0].update({
        labels: {
          format: '{value}'
        }
      }, false, false);

      options.seriesOptions.dataLabels = {
        format: '{point.y:.1f}'
      };

      options.seriesOptions.tooltip = {
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
        };
    },
    drillup: function () {
        this.yAxis[0].update({
        labels: {
          format: '{value}%'
        }
      }, false, false);
    }
  }

示例：http://jsfiddle.net/d4fmaeea/

两个警告：

在您的json文件中，您的点数值等于＆＃34;＆＃34;这不是一个有效的类型（必须是数字/ null），它可能会导致一些问题，例如值为0的列与具有值10的列具有相同的高度。
$.getJSON()是一个异步函数。您使用getJSON将list分配给options.series，但该部分可能会在创建图表后执行，因此您最终会得到没有顶级系列的图表，只有钻取的图表。

代码的异步部分：

$.getJSON('/uploads/fraction.json', function (list) {
    options.series = list;

});
$.getJSON('/uploads/drilldown.json', function (list2) {
    options.drilldown.series = list2;
    var chart = new Highcharts.Chart(options);
});

更改yAxis和plotOptions以进行深入分析

1 个答案: