Question

我正在寻求实现像图中的图表一样的图表。我需要能够向图表提供数据，以便正方形的百分比和大小应该能够动态变化。

这是到目前为止我使用Highcharts的实现：

Bitmap Heap Scan on records r  (cost=5.45..383.76 rows=150 width=73)
  Recheck Cond: (((jdata ->> 'age'::text))::integer = 26)
  ->  Bitmap Index Scan on age_index  (cost=0.00..5.41 rows=150 width=0)
        Index Cond: (((jdata ->> 'age'::text))::integer = 26)

https://codepen.io/vassilis/pen/oPKPNr

Answer 1

在您的情况下，我将使用Highcharts scatter系列类型，并根据数组中的四个值计算半径和数据：

var data = [10, 20, 5, 60],
    series = [];

series.push({
    data: [
        [data[0] / 2, data[0] / 2, data[0] / 2]
    ]
});

series.push({
    data: [
        [data[1] / 2, -data[1] / 2, data[1] / 2]
    ]
});

series.push({
    data: [
        [-data[2] / 2, -data[2] / 2, data[2] / 2]
    ]
});

series.push({
    data: [
        [-data[3] / 2, data[3] / 2, data[3] / 2]
    ]
});

Highcharts.chart('container', {
    chart: {
        type: 'scatter',
        margin: [100, 100, 100, 100],
        events: {
            load: function() {
                var xAxis = this.xAxis[0];

                Highcharts.each(this.series, function(s) {
                    s.points[0].update({
                        marker: {
                            radius: xAxis.toPixels(-100 + Math.abs(s.points[0].x)) - 100
                        }
                    });
                });
                ...
            }
        }
    },
    ...
    plotOptions: {
        series: {
            marker: {
                symbol: 'square'
            }
        }
    },
    series: series
});

实时演示：http://jsfiddle.net/BlackLabel/rkmyfseq/

如何使用Highcharts制作带有象限的图表

1 个答案: