Question

我无法创建高图框图 - 图表，我有正确格式的所有数据，即最小值，下四分位数，中位数，上四分位数和最大值。我可以显示类别，但我无法显示它们。

这是我的代码：

 function BoxPlot() {

        //ViewBag Variables
        var Till =  @Html.Raw(Json.Encode(@ViewBag.Tills));
        var Per20 = @Html.Raw(Json.Encode(@ViewBag.P20));
        var Per30 = @Html.Raw(Json.Encode(@ViewBag.P30));
        var Per40 = @Html.Raw(Json.Encode(@ViewBag.P40));
        var Per50 = @Html.Raw(Json.Encode(@ViewBag.P50));
        var Per60 = @Html.Raw(Json.Encode(@ViewBag.P60));
        var Per70 = @Html.Raw(Json.Encode(@ViewBag.P70));
        var Per80 = @Html.Raw(Json.Encode(@ViewBag.P80));
        var Per90 = @Html.Raw(Json.Encode(@ViewBag.P90));

        //Combine the till no with its data
        var final = [];
        for(var i=0; i < Till.length; i++) {
            final.push({
                name: Till[i],
                p20: Per20[i],
                p30: Per30[i],
                p40: Per40[i],
                p50: Per50[i],
                p60: Per60[i],
                p70: Per70[i],
                p80: Per80[i],
                p90: Per90[i],
            });
        }
        console.log(final)

        //get the data into the correct format for box plot
        var formated = [];
        for(var i=0; i < final.length; i++) {    
            formated.push({
                a: final[i].p20,                
                b: ((final[i].p30 + final[i].p40) / 2),
                c: ((final[i].p50 + final[i].p60) / 2),
                d: ((final[i].p70 + final[i].p80) / 2),                
                e: final[i].p90,
            });
        }

        console.log(formated)

        //graph the data
        $('#container').highcharts({

            chart: {
                type: 'boxplot'
            },

            title: {
                text: 'Highcharts Box Plot'
            },

            legend: {
                enabled: true
            },

            xAxis: {
                categories: Till,
                title: {
                    text: 'Till No.'
                }
            },

            yAxis: {
                title: {
                    text: 'Value'
                }
            },

            series: [{
                name: 'Values',
                data: formated,
                tooltip: {
                    headerFormat: '<em>Till No. {point.key}</em><br/>'
                }
            }]

        });      
    }

这是格式化数组及其包含的数据的示例：

这是图表当前的外观，您可以看到类别数组正在运行，但它没有显示数据：

Answer 1

我能够通过改变收集数据的方式来解决这个问题。我不确定箱形图是否区分大小写但是通过更改变量名称显示的数据

这是我正在使用的整个代码：

 function BoxPlot() {

        //ViewBag Variables
        var Till =  @Html.Raw(Json.Encode(@ViewBag.Tills));
        var Per20 = @Html.Raw(Json.Encode(@ViewBag.P20));
        var Per30 = @Html.Raw(Json.Encode(@ViewBag.P30));
        var Per40 = @Html.Raw(Json.Encode(@ViewBag.P40));
        var Per50 = @Html.Raw(Json.Encode(@ViewBag.P50));
        var Per60 = @Html.Raw(Json.Encode(@ViewBag.P60));
        var Per70 = @Html.Raw(Json.Encode(@ViewBag.P70));
        var Per80 = @Html.Raw(Json.Encode(@ViewBag.P80));
        var Per90 = @Html.Raw(Json.Encode(@ViewBag.P90));

        var heading = @Html.Raw(Json.Encode(@ViewBag.QueryTitle));

        //Combine the till no with its data
        var final = [];
        for(var i=0; i < Till.length; i++) {
            final.push({
                name: Till[i],
                p20: Per20[i],
                p30: Per30[i],
                p40: Per40[i],
                p50: Per50[i],
                p60: Per60[i],
                p70: Per70[i],
                p80: Per80[i],
                p90: Per90[i],
            });
        }
        console.log(final)

        //get the data into the correct format for box plot
        var formated = [];
        for(var i=0; i < final.length; i++) {
            formated.push({
                low: final[i].p20,
                q1: ((final[i].p30 + final[i].p40) / 2),
                median: ((final[i].p50 + final[i].p60) / 2),
                q3: ((final[i].p70 + final[i].p80) / 2),
                high: final[i].p90,
            });
        }



        console.log(formated)

        var boxData  = [];
        //boxData.push(formated);
        //console.log(boxData);

        //graph the data
        $('#container').highcharts({
            chart: {
                type: 'boxplot'
            },

            title: {
                text: heading
            },

            legend: {
                enabled: true
            },

            xAxis: {
                categories: Till,
                title: {
                    text: 'Till No.'
                }
            },

            yAxis: {
                title: {
                    text: 'Distribution'
                }
            },

            series: [{
                name: 'Tills',
                data:
                    formated
            }]

        });
    }

JavaScript - Highcharts框图未显示

1 个答案: