📜  Highcharts-气泡图(1)

📅  最后修改于: 2023-12-03 15:15:31.887000             🧑  作者: Mango

Highcharts-气泡图

Highcharts-气泡图是一种可视化的图表类型,可用于显示三个变量的数据,其中两个变量通过坐标轴表示,而第三个变量则通过气泡大小表示。该图表类型常用于展示数据点的数量和其中一个变量的趋势。

特点
  • 可以表示三个变量的数据。
  • 气泡大小可以直观反映数据的大小。
  • 可以通过颜色和气泡形状来展示更多的变量信息。
  • 可以进行数据的筛选和交互。
代码示例

下面是一个Highcharts-气泡图的基础示例,用于展示销售额、销售量和价格的关系:

Highcharts.chart('container', {
    chart: {
        type: 'bubble'
    },
    title: {
        text: 'Sales'
    },
    xAxis: {
        title: {
            text: 'Sales Volume'
        },
        labels: {
            format: '{value}'
        }
    },
    yAxis: {
        title: {
            text: 'Price'
        },
        labels: {
            format: '{value}$'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        useHTML: true,
        headerFormat: '<table>',
        pointFormat: '<tr><th>Sales Volume:</th><td>{point.x:.1f} units</td></tr>' +
            '<tr><th>Price:</th><td>{point.y:.2f}$</td></tr>' +
            '<tr><th>Sales:</th><td>{point.z:.1f} M$</td></tr>',
        footerFormat: '</table>',
        followPointer: true
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        },
        bubble: {
            minSize: 10,
            maxSize: '20%',
            zMin: 0,
            zMax: '100%',
            tooltip: {
                pointFormat: '{point.x} units, ${point.y}, {point.z} M$'
            }
        }
    },
    series: [{
        data: [
            [76.4, 12.6, 95.8],
            [75.1, 16.4, 89.8],
            [74.4, 12.4, 94.8],
            [76.3, 13.1, 102.8],
            [75.8, 20, 88.5],
            [73.1, 11.3, 89.2],
            [73.6, 18.5, 100],
            [71.1, 10.4, 89.6],
            [74.4, 12.4, 91.4],
            [62.2, 19.6, 65.6]
        ],
        name: 'Sales'
    }]
});

该示例中,我们将 chart 属性设置为 'bubble',用于创建Highcharts-气泡图表。我们还提供了一个标题 title、两个坐标轴 xAxisyAxis,以及一个数据系列 series。在 plotOptions 中,可以设置气泡的最小和最大大小以及最大和最小 z 值。此外,Title还有 tooltip 属性用于显示提示框,用于交互式数据筛选和展示。

总结

Highcharts-气泡图是一种可视化的图表类型,能够表示三个变量的数据。该图表种类适用于需要直观反映数据数量和其中一个变量趋势的场景,我们可以通过配置颜色和气泡形状来展示更多变量信息。我们还可以使用Highcharts-气泡图提供的筛选、交互等功能来进行数据的分析和筛选。