如何指定Chart.js的“每个数据集”解析？

4si2a6ki 于 2022-11-06 发布在 Chart.js

关注(0)|答案(3)|浏览(168)

我试图弄清楚在指定数据集时如何使用ChartJS中的yAxisKey选项，但我在从文档中重现此示例时遇到了麻烦。我尝试搜索涉及yAxisKey（或xAxisKey）、parsing选项以及指定datasets的一般信息的问题，但不幸的是，到目前为止，我一无所获。

示例

<!doctype html>
<html>
<head>
    <title>Example Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        const data = [{x: 'Jan', net: 100, cogs: 50, gm: 50}, {x: 'Feb', net: 120, cogs: 55, gm: 75}];
        const config = {
                type: 'bar',
                data: {
                    labels: ['Jan', 'Feb'],
                    datasets: [{
                        label: 'Net sales',
                        data: data,
                        parsing: {
                            yAxisKey: 'net'
                        }
                    }, {
                        label: 'Cost of goods sold',
                        data: data,
                        parsing: {
                            yAxisKey: 'cogs'
                        }
                    }, {
                        label: 'Gross margin',
                        data: data,
                        parsing: {
                            yAxisKey: 'gm'
                        }
                    }]
                },
            };

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

这为我生成了一个看起来空无一物的图表。

我是不是漏掉了什么明显的东西？误解了语法？
提前感谢！

chart.js

来源：https://stackoverflow.com/questions/63511006/how-can-i-specify-per-dataset-parsing-with-chart-js

3条答案

按热度按时间

s3fp2yjn1#

由于当前使用的Chart.js版本2.8.0中还没有per-dataset parsing选项，因此您仍然可以通过Array.map()函数获得相同的结果。
请查看修改后的代码并了解其工作原理。

<!doctype html>
<html>

<head>
  <title>Example Chart</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    const data = [
      { x: 'Jan', net: 100, cogs: 50, gm: 50 }, 
      { x: 'Feb', net: 120, cogs: 55, gm: 75 }
    ];
    const config = {
      type: 'bar',
      data: {
        labels: data.map(o => o.x),
        datasets: [{
          label: 'Net sales',
          data: data.map(o => o.net)
        }, {
          label: 'Cost of goods sold',
          data: data.map(o => o.cogs)
        }, {
          label: 'Gross margin',
          data: data.map(o => o.gm)
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    };

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

</html>

赞(0）回复(0）举报 2022-11-06

vhmi4jdf2#

显然，这个基于数据集的parsing选项只在即将发布的Chart.js版本3.0.0中可用，而当前的稳定版本是2.9.3。
请看一下下面的代码，看看它是如何与Chart.js 3.0.0 alpha-2一起工作的。

<!doctype html>
<html>
<head>
    <title>Example Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-alpha.2/chart.min.js"></script>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        const data = [{x: 'Jan', net: 100, cogs: 50, gm: 50}, {x: 'Feb', net: 120, cogs: 55, gm: 75}];
        const config = {
                type: 'bar',
                data: {
                    labels: ['Jan', 'Feb'],
                    datasets: [{
                        label: 'Net sales',
                        data: data,
                        parsing: {
                            yAxisKey: 'net'
                        }
                    }, {
                        label: 'Cost of goods sold',
                        data: data,
                        parsing: {
                            yAxisKey: 'cogs'
                        }
                    }, {
                        label: 'Gross margin',
                        data: data,
                        parsing: {
                            yAxisKey: 'gm'
                        }
                    }]
                },
            };

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

赞(0）回复(0）举报 2022-11-06

zpjtge223#

如果替换CDN，现有代码将工作

赞(0）回复(0）举报 2022-11-06