Approach to display graphical data on Home page
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
加载中,请稍侯......
精彩评论