Approach to display graphical data on Home page_问答_开发者

Approach to display graphical data on Home page

开发者 https://www.devze.com 2022-12-07 17:19 出处：网络

I have this design which I need to implement in our web application. [Design Page] (https://i.stack.imgur.com/zW7v3.png)

I have this design which I need to implement in our web application.

[Design Page] (https://i.stack.imgur.com/zW7v3.png)

Our application stack is c#, .Net MVC, JS, html, CSS

Anyone please provides your expertise how should I proceed with this?

Can I use any JS library to build bar chart?

However, data which will show will be dynamic, it changes based on USER.

Really appreciate your suggestion and advice.

I have tried with ChartJs library and able to create barchart in required format

[Using Chart JS bar chart design] (https://i.stack.imgur.com/YetMo.png)

to User Chart JS, I have create lots of Canvas + all canvas will need its own script.

    <!DOCTYPE html>
    <html>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <body>
    <div style="display:flex;" id="test">
    <canvas id="myChart3" style="width:100%;max-width:50px;height:110px;"></canvas>
    <canvas id="myChart" style="width:100%;max-width:100px;height:110px;"></canvas>
    <canvas id="myChart2" style="width:100%;max-width:100px;height:110px;"></canvas>
    </div>

    <script>
    var xValues = ["2021", "2022"];
    var yValues = [1, 2.5];
    var barColors = ["red", "green","blue","orange","brown"];


    new Chart("myChart3", {
       type: "bar",
       options: {
       maintainAspectRatio: false,
       legend: {display: false},
    
       scales: {
         xAxes: [{
         display: true,
         gridLines: {
           display: false,
           drawBorder:false,
         },
         labels: {
          开发者_JAVA技巧 show: true,
         }
       }],
       yAxes: [{
         type: "linear",
         display: true,
         position: "left",
         id: "y-axis-1",
         gridLines: {
           display: true,
           drawborder:false,
         },
         labels: {
           show: true,

         },
         ticks: {
           beginAtZero: true,
           userCallback: function(label, index, labels) {
             if (Math.floor(label) === label) {
               return label;
             }

           },
           max: 5.5,
           stepSize: 1
         }

        }]
       },
      }
    });

    new Chart("myChart", {
      type: "bar",
      data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
    },
   options: {
   maintainAspectRatio: false,
    legend: {display: false},
    
    scales: {
         xAxes: [{
         display: true,
         gridLines: {
           display: false
         },
         labels: {
           show: true,
         }
       }],
       yAxes: [{
         type: "linear",
         display: true,
         position: "left",
         id: "y-axis-1",
         gridLines: {
           display: true,
           drawBorder:false,
         },
         labels: {
           show: true,

         },
         ticks: {
         display:false,
           beginAtZero: true,
           userCallback: function(label, index, labels) {
             if (Math.floor(label) === label) {
               return label;
             }

           },
           max: 5.5,
           stepSize: 1
         }

       }]
     },
    }
    });

     new Chart("myChart2", {
     type: "bar",
     data: {
      labels: xValues,
      datasets: [{
      backgroundColor: barColors,
      data: [3, 3.5]
     }]
    },
    options: {
    maintainAspectRatio: false,
    legend: {display: false},
    
    
    scales: {
         xAxes: [{
         display: true,
         gridLines: {
           display: false
         },
         labels: {
           show: true,
         }
       }],
       yAxes: [{
         type: "linear",
         display: true,
         position: "left",
         id: "y-axis-1",
         gridLines: {
           display: true,
           drawBorder: false,
         },
         labels: {
           show: true,

         },
         ticks: {
         display:false,
           beginAtZero: true,
           userCallback: function(label, index, labels) {
             if (Math.floor(label) === label) {
               return label;
             }

           },
           max: 5.5,
           stepSize: 1
         }

       }]
     },
    }
    });



    </script>

    </body>
    </html>

this is just for three canvas, I will have more than 100 data which needs to be display.

Any better approach which I can follow to make it proper and faster also.

Thanks and Regards, Ankit