Question

实际上我正在为我的学校做实习我需要使用非常大的数据库上的信息来实际绘制我正在为他们开发的网站上的饼图。他们想知道使用的端口数与未使用的端口数，他们也希望知道每个设备使用的端口数与未使用的端口数，以便输入的任何新数据都可以自动更改图。唯一存在的值是“使用”和“未使用”如何使用这些信息绘制饼图？谢谢

Answer 1

由于您没有列出数据库结构，因此这是一个通用的SQL查询：

SELECT status, COUNT(*)
FROM yourTable
GROUP BY status

此处status指的是表示＆＃34;使用过的＆＃34;或＆＃34;未使用＆＃34;而yourTable就是包含此信息的表格。完成后，您可以通过以下方式在highcharts中创建饼图：

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Ports in use'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: 'used',
            y: 56 // from the SQL query
        }, {
            name: 'not used',
            y: 24, // from the SQL query
            sliced: true,
            selected: true
        }]
    }]
});

直播demo。

要更新此图表，我建议使用计时器在一个时间间隔内重新查询数据库并刷新图表中的数据。因为你没有提到任何其他的依赖关系，所以我将链接到如何update一个highcharts图表。如果您提供更多信息，例如您正在使用的库或网页使用的框架，则可以提供更详细的答案。

使用'used'和'not used'等字符串创建饼图

1 个答案: