Question

我正在为客户创建一个页面，其中包含其对业务数据的特定要求。我的目标是可视化或只制作一份业务报告，其中有1个带有过滤器的可悬浮表+ 1个表格中的数据图表。

该图表可以很好地呈现，至少X轴上的标签具有Y轴的混合值。特定的佣金或标签未提供DB提供的正确信息。

每个佣金都有其自己的计算量和DB的价值。每个委员会对于销售价格，实际总成本和未来总成本

具有其自身的价值。

我已经基于webmatrix教程中的ASP.NET网页设置了一个简单页面调用图表和脚本助手。从我的学生时代来看，这似乎很熟悉，但可能不大声笑。

下面的代码

HTML

@{
    var db = Database.Open("SiempDB");
    var Value = Request.QueryString["text"];
    dynamic displaydata = null;

    if (Value.IsEmpty())
    {
        displaydata = db.Query("SELECT * FROM [Siemp].[qlik].[SiempBizRepTab]");
    }
    else
    {
        displaydata = db.Query("SELECT * FROM [Siempelkamp].[qlik].[SiempBizRepTab] WHERE Commission = @0", Value);
    }

    var CommissionGraph = db.Query("SELECT Commission_name, SellPrice, ActualCostsOverall, FutureCostsOverall FROM [Siemp].[qlik].[SiempBizRepTab] ORDER BY Commission_ID desc");

}

<!doctype html>
<html lang="en">
<head>

**skipping unnecessary content of <head>...**

</head>
<body>

   <div class="search-box">
        <form method="get">
            <input type="text" name="text" value="@Request.QueryString["text"]" placeholder="Enter commission" />
            <input type="submit" value="Select" />
        </form>
    </div>-->

    <div class="ComissionOverlay">
        @tableHelper.drawTable("IsColoredRow", "")
    </div>

    <div class="ComissionGraph">
        <canvas id="rep1" width="2000" height="600">

            @GraphHelper.myChart(CommissionGraph, "overview", "rep1")


        </canvas>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>

    <script>

        window.onload = function () {
           @ScriptHelper.myScript(CommissionGraph, "overview", "rep1")    
        }

    </script>


</body>
</html>

脚本助手


ScriptHelper.myScript(IEnumerable<dynamic>commission, String type, String id) {

        var commission = [@foreach (var com in commission)
        {<text>'@(com.Commission_name)',</text>}]


        var actualcosts = [@foreach (var actual in commission)
        {<text>@(actual.ActualCostsOverall),</text>}];
        var sellprice = [@foreach (var price in commission)
        {<text>@(price.SellPrice),</text>}];
        var futurecosts = [@foreach (var future in commission)
        {<text>@(future.FutureCostsOverall),</text>}];



        var ctx@(id) = document.getElementById('@id').getContext('2d');
        var myChart@(id) = new Chart(ctx@(id), {
        // The type of chart we want to create
        type: 'bar',

        // The data for our dataset
        data: {
        labels: commission,
        datasets: [{
        label: 'Selling Price',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: sellprice
        },{
        label: 'Actual Costs',
        backgroundColor: 'rgb(0, 51, 204)',
        borderColor: 'rgb(255, 99, 132)',
        data: actualcosts
        },{
        label: 'Future Costs',
        backgroundColor: 'rgb(0, 128, 0)',
        borderColor: 'rgb(255, 99, 132)',
        data: futurecosts
        }


        ]
        },

        // Configuration options go here

        options: {
            scales: {
               xAxes: [{
                 stacked: true
                      }],
               yAxes: [{
                 stacked: true
                      }]
                    }
                 }
        })
}

图表助手


@helper myChart(IEnumerable<dynamic> data, String type, String id)
{
    string[] Commission= new string[data.Count()];
    <div class="col-md-10"><canvas id="@id" width="400" height="200"></canvas></div>

}

当前视图-需要进行排序以打开/关闭某些列。 X轴上的标签数据未正确显示。悬停在特定的栏上时可以看到。 https://imagizer.imageshack.com/img922/4545/FkhiID.png

期望：每个委员会将拥有自己的3个值（销售价格，实际成本，未来成本） https://imagizer.imageshack.com/img922/1980/CMdqpW.png

一些日志和收集数据的图片（也许有用） https://imagizer.imageshack.com/img922/2283/5fUbwC.png

如果解决了这个问题，至少请原谅，我对此有点新手：/ 也想发布图片，但没有足够的代表，至少提供了链接：-）

欢迎任何建议

Chartjs数组无法正确排序？

0 个答案: