使用海图绘制条形图的更简单方法?

杰克逊故事

我开始尝试使用Highcharts。

似乎为了绘制条形图,我需要填写以下两个属性:

       xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ],
            crosshair: true
        },
        series: [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

        }, {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
        }, {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        }

现在我有下表:

╔════╦════════╦════════╗
║ ID ║ State  ║ Number ║
╠════╬════════╬════════╣
║ A  ║ S1     ║      7 ║
║ B  ║ S1     ║      6 ║
║ B  ║ S2     ║      5 ║
║ C  ║ S3     ║      4 ║
║ C  ║ S1     ║      3 ║
╚════╩════════╩════════╝

我想要的条形图是

  1. X是 ID
  2. 对于每个ID,我想绘制每个可能的数字State

因此,似乎我需要Highcharts的以下属性:

       xAxis: {
            categories: [
                'A',
                'B',
                'C'
            ],
            crosshair: true
        },
        series: [{
            name: 'S1',
            data: [7, 6, 3]
        }, {
            name: 'S2',
            data: [0, 5, 0]    
        }, {
            name: 'S3',
            data: [0, 0, 4]
        }
        }

这是正确的吗?


如此看来,我需要仔细地将我的原始表(在现实生活中它可以更大,更ID和美国)的性能,并填充0ID没有谁小号Number某些State秒。例如,我可能不得不使用字典字典来存储转换后的表。

有没有简单的方法可以做到这一点?

PawełFus

是的,在您的情况下,有一件事情是多余的,那就是填充零。而是提供索引类别并稍微更改数据格式。

例如:

name: 'S2',
data: [0, 5, 0] 

可以更改为:

name: 'S2',
data: [ [1, 5] ] 

并且数字5将通过索引连接到类别1,该索引链接到类别名称B

因此,我将按照以下步骤格式化您的数据:

  • 创建没有重复项的类别数组
  • 将数据分成单独的系列
  • 为每个点(或行/数字-您更喜欢称呼它)设置相应类别的索引

请注意,这可能只是一些内置方法的建议,尽管这样做可以更容易一些。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章