如何在ASP.net中使用StringBuilder绘制条形图

问题描述

我正在使用StringBuilder从数据库中获取一个值，并希望将此值放在jQuery中以显示条形图。如何做到这一点，我应该在哪里分配StringBuilder值？当前所需的值是TOTAL SALES，将仅显示一个条。 X轴将成为图例-“ Total Sales”，Y轴将成为值。 GetTotalSales（）引用数据访问层中编写查询的方法。以下是页面加载时的C＃代码：

 protected void Page_Load(object sender,EventArgs e)
    {
        if (!Page.IsPostBack)
        {
           
            StringBuilder strbuilder1 = new StringBuilder();
            string totalSales = objHomeDal.GetTotalSales().ToString();
            strbuilder1.Append(totalSales);
            
        }
    }

aspx代码：此处声明了图表画布

 <div class="card-body">                       
                    <div class="chart-bar">
                        <canvas id="myBarChart"></canvas>
                    </div>

jQuery部分：以下是jQuery部分。

 <script type="text/javascript">
        Chart.defaults.global.defaultFontFamily = 'Nunito','-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
       Chart.defaults.global.defaultFontColor = '#858796';
       var ctx = document.getElementById("myBarChart");
       var myBarChart = new Chart(ctx,{
           type: 'bar',data: {
               labels: [Total Sales],datasets: [{
                   label: "Revenue",backgroundColor: "#4e73df",hoverBackgroundColor: "#2e59d9",borderColor: "#4e73df",data:  //THIS IS WHERE THE TOTAL SALES VALUE SHOULD BE FETCHED TO disPLAY
               }],},options: {
               maintainAspectRatio: false,layout: {
                   padding: {
                       left: 10,right: 25,top: 25,bottom: 0
                   }
               },scales: {
                   xAxes: [{
                       time: {
                           unit: 'month'
                       },gridLines: {
                           display: false,drawBorder: false
                       },ticks: {
                           maxTicksLimit: 6
                       },maxBarThickness: 25,}],yAxes: [{
                       ticks: {
                           min: 0,maxTicksLimit: 5,padding: 10,callback: function (value,index,values) {
                               return  number_format(value);
                           }
                       },gridLines: {
                           color: "rgb(234,236,244)",zeroLineColor: "rgb(234,drawBorder: false,borderDash: [2],zeroLineBorderDash: [2]
                       }
                   }],legend: {
                   display: false
               },tooltips: {
                   titleMarginBottom: 10,titleFontColor: '#6e707e',titleFontSize: 14,backgroundColor: "rgb(255,255,255)",bodyFontColor: "#858796",borderColor: '#dddfeb',borderWidth: 1,xPadding: 15,yPadding: 15,displayColors: false,caretPadding: 10,callbacks: {
                       label: function (tooltipItem,chart) {
                           var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                           return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
                       }
                   }
               },}
       });

    </script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

asp.net c#c#jquery stringbuilder