使用ChartJS在C＃中显示图表

问题描述 投票：0回答：1

过去两周我一直在学习C＃，现在我正在学习如何使用ChartsJs将一些基本图表合并到我与同学一起构建的Web应用程序中。下面，我提供了脚本页面，其中显示了基本line chart和bar chart的逻辑。现在，通过ChartJs网站和文档，我正在研究创建折线图和条形图的其他方法，其中一种是line styles chart。为了节省空间，我提供了repo。我想知道，如何使用与原始折线图相同的逻辑类型来获得该折线图？如何将回购中看到的内容应用于自己的脚本页面？我知道这对你们中的许多人来说可能很简单，但是我一直在努力度过整个周末。任何帮助或线索将不胜感激。

这是我设置脚本文件的方式。 

//Script.JS
$(function () {
        new Chart(document.getElementById("line_chart").getContext("2d"), getChartJs('line'));
        new Chart(document.getElementById("bar_chart").getContext("2d"), getChartJs('bar'));
    });

function getChartJs(type) {
    var config = null;

if (type === 'line') {
    config = {
        type: 'line',
        data: {
            labels: ["Groceries", "Rent", "Utilities", "Student Loans", "Car payment"],
            datasets: [{ 
                label: "Refund",
                data: [65, 59, 80, 45, 56],
                borderColor: 'rgba(0, 188, 212, 0.75)',
                backgroundColor: 'rgba(0, 188, 212, 0.3)',
                pointBorderColor: 'rgba(0, 188, 212, 0)',
                pointBackgroundColor: 'rgba(0, 188, 212, 0.9)',
                pointBorderWidth: 1
            }
            ]
        },
        options: {
            responsive: true,
            legend: false
        }

    }
}
else if (type === 'bar') {
    config = {
        type: 'bar',
        data: {
            labels: ["Gas bill", "light bill", "Rent", "Cell phone bill", "Water Bill", "Groceries", "Spotify"],
            datasets: [{
                label: "My First dataset",
                data: [65, 59, 80, 81, 56, 55, 40],
                backgroundColor: 'rgba(0, 188, 212, 0.8)'
            }, {
                label: "My Second dataset",
                data: [28, 48, 40, 19, 86, 27, 90],
                backgroundColor: 'rgba(233, 30, 99, 0.8)'
            }]
        },
        options: {
            responsive: true,
            legend: false
        }
    }
}
return config;
}

这是我设置HTML的方式。 

<div class="report-card">
     <p class="text-center p-t-20 text-muted">Monthly expenses</p>
     <canvas id="line_chart" height="150"></canvas>
</div>
<div class="report-card">
      <p class="text-center p-t-20 text-muted">Monthly expenses</p>
     <canvas id="bar_chart" height="150"></canvas>
</div>

这是从ChartJS存储库中创建线型图的方式：

<!doctype html>
<html>

<head>
    <title>Line Styles</title>
    <script src="../../../dist/Chart.min.js"></script>
    <script src="../../utils.js"></script>
    <style>
    canvas{
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
    <div style="width:75%;">
        <canvas id="canvas"></canvas>
    </div>
    <script>
        var config = {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'Unfilled',
                    fill: false,
                    backgroundColor: window.chartColors.blue,
                    borderColor: window.chartColors.blue,
                    data: [
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor()
                    ],
                }, {
                    label: 'Dashed',
                    fill: false,
                    backgroundColor: window.chartColors.green,
                    borderColor: window.chartColors.green,
                    borderDash: [5, 5],
                    data: [
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor()
                    ],
                }, {
                    label: 'Filled',
                    backgroundColor: window.chartColors.red,
                    borderColor: window.chartColors.red,
                    data: [
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor()
                    ],
                    fill: true,
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Chart.js Line Chart'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        }
                    }]
                }
            }
        };

        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = new Chart(ctx, config);
        };
    </script>
</body>

</html>
c# .net charts chart.js
1个回答
0
投票

到目前为止，我了解到您正在寻找折线图，实际上，它是具有某些样式的折线图。

这是您的更新HTML

   <div class="report-card">
        <p class="text-center p-t-20 text-muted">Monthly expenses</p>
        <canvas id="line_chart" height="150"></canvas>
    </div>
    <div class="report-card">
        <p class="text-center p-t-20 text-muted">Monthly expenses</p>
        <canvas id="bar_chart" height="150"></canvas>
    </div>
    <div class="report-card">
        <p class="text-center p-t-20 text-muted">Monthly expenses</p>
        <canvas id="line_styles_Chart" height="150"></canvas>
    </div>

和script.js文件

$(function () {
    new Chart(document.getElementById("line_chart").getContext("2d"), getChartJs('line'));
    new Chart(document.getElementById("bar_chart").getContext("2d"), getChartJs('bar'));
    new Chart(document.getElementById("line_styles_Chart").getContext("2d"), getChartJs('line-styles'));
});

function getChartJs(type) {
    var config = null;

    if (type === 'line') {
        config = {
            type: 'line',
            data: {
                labels: ["Groceries", "Rent", "Utilities", "Student Loans", "Car payment"],
                datasets: [{
                    label: "Refund",
                    data: [65, 59, 80, 45, 56],
                    borderColor: 'rgba(0, 188, 212, 0.75)',
                    backgroundColor: 'rgba(0, 188, 212, 0.3)',
                    pointBorderColor: 'rgba(0, 188, 212, 0)',
                    pointBackgroundColor: 'rgba(0, 188, 212, 0.9)',
                    pointBorderWidth: 1
                }
                ]
            },
            options: {
                responsive: true,
                legend: false
            }

        }
    }
    else if (type === 'bar') {
        config = {
            type: 'bar',
            data: {
                labels: ["Gas bill", "light bill", "Rent", "Cell phone bill", "Water Bill", "Groceries", "Spotify"],
                datasets: [{
                    label: "My First dataset",
                    data: [65, 59, 80, 81, 56, 55, 40],
                    backgroundColor: 'rgba(0, 188, 212, 0.8)'
                }, {
                    label: "My Second dataset",
                    data: [28, 48, 40, 19, 86, 27, 90],
                    backgroundColor: 'rgba(233, 30, 99, 0.8)'
                }]
            },
            options: {
                responsive: true,
                legend: false
            }
        }
    }
    else if (type === 'line-styles') {
        var config = {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March'],
                datasets: [{
                    label: 'Gas bill',
                    fill: false,
                    backgroundColor: 'rgba(0, 188, 212, 0.8)',
                    borderColor: 'rgb(54, 162, 235)',
                    data: [0, 42, 55],
                }, {
                    label: 'Light bill',
                    fill: false,
                    backgroundColor: 'rgba(233, 30, 99, 0.8)',
                    borderColor: 'rgb(75, 192, 192)',
                    borderDash: [5, 5],
                    data: [28, 48, 40],
                }, {
                    label: 'Rent',
                    backgroundColor: 'rgba(255, 209, 0, 0.8)',
                    borderColor: 'rgb(255, 205, 86)',
                    data: [40, 27, 90],
                    fill: true,
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Line Styles Chart'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Month'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Value'
                        }
                    }]
                }
            }
        };
    }
    return config;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.