一页上的多个图表

Question

我有一个网站显示足球比赛的比赛统计数据，我有大量的统计数据，想尝试摆脱 table 中的一行又一行的数字。我使用 jquery 数据 tables 并为每一行数据添加了一个下拉列表，其中包含更多统计信息。在这个下拉列表中，我想要一个 canvas.js 雷达图

问题是我无法找到一种方法来绕过必须用大量代码初始化每个图表，然后该代码将在 table 的每一行重复，因为繁忙时间可能超过 100比赛

下面是我想要实现的代码，但我希望在数据的每一行中都包含该代码table，理想情况下，我想对图表进行一次初始化，并且我的代码中只有一行代码数据table 与数字

有什么想法吗？

<!doctype html>
<html>

<head>

    <title>Radar Chart</title>
    <script src="dist/2.8.0/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>
<button id="save-btn">Save Chart Image</button>
    <div style="width:40%">
        <canvas id="canvas"></canvas>
    </div>

    <script>
        var randomScalingFactor = function() {
            return Math.round(Math.random() * 100);
        };

        var color = Chart.helpers.color;
        var config = {
            type: 'radar',
            data: {
                labels: [['Shots on', ' Target'], ['Shots Off', 'Target'], 'Corners', 'possession (out of 10)'],
                datasets: [{
                    label: 'Home team',
                    backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
                    borderColor: window.chartColors.red,
                    pointBackgroundColor: window.chartColors.red,
                    data: [
                        '5',
                        '7',
                        '4',
                        '6',
                        '2'
                    ]
                }, {
                    label: 'Away Team',
                    backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
                    borderColor: window.chartColors.blue,
                    pointBackgroundColor: window.chartColors.blue,
                    data: [
                        '2',
                        '1',
                        '3',
                        '5',
                        '0'
                    ]
                }]
            },
            options: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'In Play Stats'
                },
                scale: {
                    ticks: {
                        beginAtZero: true
                    }
                }
            }
        };

        window.onload = function() {
            window.myRadar = new Chart(document.getElementById('canvas'), config);


        };






    </script>
</body>

</html>

Answer 1

我能想到的一种方法是创建一个函数，如果您的所有图表都相似并且只有少数参数发生变化，例如在下面的示例中我考虑过 chartId、labels , dataset 和 title 是变化的。您还可以编写在给定特定参数的情况下创建数据集的函数：

var randomScalingFactor = function() {
  return Math.round(Math.random() * 100);
};
window.chartColors = {
  red: 'rgb(255, 99, 132)',
  orange: 'rgb(255, 159, 64)',
  yellow: 'rgb(255, 205, 86)',
  green: 'rgb(75, 192, 192)',
  blue: 'rgb(54, 162, 235)',
  purple: 'rgb(153, 102, 255)',
  grey: 'rgb(201, 203, 207)'
};
var color = Chart.helpers.color;
var labels = [
  ['Shots on', ' Target'],
  ['Shots Off', 'Target'], 'Corners', 'possession (out of 10)'
];
var datasets = [{
  label: 'Home team',
  backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
  borderColor: window.chartColors.red,
  pointBackgroundColor: window.chartColors.red,
  data: ['5', '7', '4', '6', '2']
}, {
  label: 'Away Team',
  backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
  borderColor: window.chartColors.blue,
  pointBackgroundColor: window.chartColors.blue,
  data: ['2', '1', '3', '5', '0']
}];

window.onload = function() {
  window.myRadar = createChart('canvas', labels, datasets, 'In Play Stats');
};

function createChart(chartId, labels, dataset, title) {
  return new Chart(document.getElementById(chartId), {
    type: 'radar',
    data: {
      labels: labels,
      datasets: dataset
    },
    options: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: title
      },
      scale: {
        ticks: {
          beginAtZero: true
        }
      }
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div style="width:40%; min-width: 700px;">
  <canvas id="canvas" style="width: 700px;"></canvas>
</div>

一页上的多个图表

Multiple Graphs on one page

javascript

radar-chart

chart.js