来自 JSON 文件的堆积条形图 - 似乎忽略了一个值

Question

对这些东西很陌生，所以非常感谢任何帮助。首先，这是我的 JSON 文件的内容：

[
  {
    "drg": "NONSPECIFIC CEREBROVASCULAR DISORDERS W MCC",
    "approved": 124,
    "denied": 38
  },
  {
    "drg": "SEIZURES WO MCC",
    "approved": 138,
    "denied": 26
  },
  {
    "drg": "CHRONIC OBSTRUCTIVE PULMONARY DISEASE W CC",
    "approved": 352,
    "denied": 61
  },
  {
    "drg": "CHEST PAIN",
    "approved": 246,
    "denied": 44
  },
  {
    "drg": "TRANSIENT ISCHEMIA",
    "approved": 205,
    "denied": 37
  },
  {
    "drg": "OTHER DISORDERS OF NERVOUS SYSTEM W CC",
    "approved": 133,
    "denied": 23
  },
  {
    "drg": "DIABETES W MCC",
    "approved": 151,
    "denied": 27
  },
  {
    "drg": "CARDIAC ARRHYTHMIA CONDUCTION DISORDERS W CC",
    "approved": 336,
    "denied": 55
  },
  {
    "drg": "HYPERTENSION WO MCC",
    "approved": 177,
    "denied": 29
  },
  {
    "drg": "POISONING TOXIC EFFECTS OF DRUGS WO MCC",
    "approved": 144,
    "denied": 24
  }
]

我的堆叠条形图可以很好地处理 CSV 文件，但一直忽略 "denied" 值。我怀疑这个问题与我对代码的 "processed_json.push()" 部分进行格式化有关。它呈现堆叠在其自身之上的批准值。这是脚本文件：

<script>
    $(document).ready(function() {
        var processed_json = new Array();
        $.getJSON('/dashboard-test-data/denied-percentage-2015-chart.json', function(data) {
            for (i = 0; i < data.length; i++) {
                processed_json.push([data[i].drg, data[i].approved, data[i].denied]);
            }
            $('#denied-percentage-2015-chart').highcharts({
                chart: {
                    type: 'bar'
                },
                credits: {
                    text: 'Vortext Analytics',
                    href: 'http://www.vortextanalytics.com'
                },
                title: {
                    text: 'Top 10 DRG by Denial Percentage 2015'
                },
                xAxis: {
                    type: 'category',
                },
                navigation: {
                    menuStyle: {
                        border: '1px solid #ddd',
                        boxShadow: 'none',
                    },
                    menuItemStyle: {
                        padding: '5px 1.5rem',
                    },
                    menuItemHoverStyle: {
                        backgroundColor: '#f7f7f9',
                        color: '#666'
                    },
                    buttonOptions: {
                        height: 40,
                        width: 46,
                        symbolX: 23,
                        symbolY: 22,
                        x: 10,
                        y: -15,
                        symbolSize: 13,
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Total Records'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        },
                        formatter: function() {   
                            return (this.axis.series[1].yData[this.x] / this.total * 100).toPrecision(2) + '%';
                        }
                    }
                },
                legend: {
                    align: 'left',
                    x: 0,
                    verticalAlign: 'bottom',
                    y: 22,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    shadow: false,
                    reversed: true,
                },
                tooltip: {
                    shared: true,
                    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: {point.y:,0f} of {point.stackTotal:,0f}  <b>({point.percentage:.1f}%)</b><br />',
                },
                plotOptions: {
                    series: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true,
                            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                            style: {
                                textOutline: 'none',
                                fontWeight: 'normal',
                                fontSize: '9px'
                            }
                        },
                        pointWidth: 20,   
                    }
                },
                series: [{
                    name: 'approved',
                    color: '#55B4E4',
                    data: processed_json,
                }, {
                    name: 'denied',
                    color: '#005079',
                    data: processed_json,
                }],
            });
        });
    });
</script>

这是最终产品应该产生的结果（屏幕截图来自我的 csv 版本）： Correct

这是我从 JSON 文件中得到的：incorrect

非常感谢任何帮助或指导。谢谢。

Answer 1

看看 highchart 的 stacked bar chart example。对于每个系列，data 包含该系列的值数组。

series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2]
}, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1]
}, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5]
}]

在您的情况下，您应该创建包含每个系列值的单独数组，而不是创建 processed_json 对象数组。

这样改变循环：

        var xAxis = []
            , approvedCount = []
            , deniedCount = []

        for (i = 0; i < data.length; i++) {
            xAxis.push(data[i].drg);
            approvedCount.push(data[i].approved);
            deniedCount.push(data[i].denied);

然后相应地调整图表的实例化：

// (...)
xAxis: {
    categories: xAxis
},
// (...)
            series: [{
                name: 'approved',
                color: '#55B4E4',
                data: approvedCount,
            }, {
                name: 'denied',
                color: '#005079',
                data: deniedCount,
            }],
// (...)

来自 JSON 文件的堆积条形图 - 似乎忽略了一个值

Stacked bar chart from JSON file - seems to be ignoring a value

json

highcharts

stacked-chart