Charts 使用类似“已使用”和“未使用”的字符串创建饼图

实际上，我正在为我的学校做这个实习，我需要使用一个非常大的数据库上的信息，在我为他们开发的网站上画一个饼图。他们想知道使用的端口数与未使用的端口数，还想知道每个设备使用的端口数与未使用的端口数，以便输入的任何新数据都能自动更改图表。仅使用和未使用当前的值如何使用这些信息绘制饼图？。谢谢

因为您没有列出数据库结构这里是一个通用SQL查询：

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

这里的status指的是表示已使用或未使用的列，而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
        }]
    }]
});

活着

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

您可以使用chart.js来实现这一点