Question

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

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

下面是我要实现的代码，但我希望在数据表的每一行中，理想情况下，我想初始化一次图形，而在我的数据表中只有一行代码带有数字

有什么想法吗？

<!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，{ {1}}和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
        }
      }
    }
  });
}

一页上有多个图

1 个答案: