Отображение графиков в C # с использованием ChartJS - PullRequest
Новая
       24

Отображение графиков в C # с использованием ChartJS

0 голосов
/ 14 октября 2019

Я изучал C # в течение последних двух недель, и сейчас я учусь включать некоторые базовые диаграммы, используя ChartsJs в веб-приложение IЯ строю с моим одноклассником. Ниже я предоставил страницу скрипта, которая отображает логику для базовой линейной диаграммы и гистограммы . Теперь, просматривая веб-сайт ChartJs и документацию Я рассматриваю другие способы создания линейных и гистограммных диаграмм, и одним из них является диаграмма стилей линий . В целях космоса я предоставил репо . Мне интересно, как я могу получить эту диаграмму стилей линий, используя ту же логику, которую я использовал для моей исходной линейной диаграммы? Как применить то, что я вижу в репо, к своей странице скрипта? Я знаю, что для многих из вас это может быть чем-то простым, но я пытался работать над этим все выходные. Буду признателен за любую помощь или руководство.

Вот так у меня настроен файл сценария. 

//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>

1 Ответ

0 голосов
/ 14 октября 2019

До сих пор я понял, что вы ищете диаграмму стилей линий, на самом деле, это линейная диаграмма с некоторыми стилями.

Вот ваше обновление 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>

и скрипт. 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;
}
...