如何集成mustache模板读取json数据并在Chartjs中动态显示

wd2eg0qa 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(213)

我试图从data.json传递数据到mustache模板以创建条形图。我无法确定我需要在哪里传递数据以获得正确的图形。请查看以下代码片段来帮助我确定。

<html>
<body>
<div>
    <canvas height="200px" width="300px" id="bar-graph"></canvas>
</div>
<script>
     const barCtx = document.getElementById('bar-graph').getContext('2d');
     new Chart(barCtx, barGraphConfig());
     function barGraphConfig() {    
    return {
      type: 'bar',
      data: {
        datasets: [{
          data: {{barGraph}},
          borderRadius: 5,
          backgroundColor: [
            '#fece8c',
            '#a28cfe',
            '#a28cfe',
            '#feab8c',
            '#8ca2fe',
            '#8ca2fe',
          ],
          barThickness: 20
        }],
        labels: ['AAA', 'AA', 'A', 'BBB', 'BB', 'B']
      },
      options: {
        plugins: { legend: { display: false } },
        showTooltip: false,
        animation: {
          duration: 0,
          onComplete: renderDataLabel,
        },
        parsing: {
          xAxisKey: 'sector',
          yAxisKey: 'value'
        },
        scales: {
          x: {
            grid: {
              borderWidth: 3,
              borderColor: '#232323',
              display: false,
            },
          },
          y: {
            display: false,
            beginAtZero: true
          }
        }
      },
    };
  }
</script>
</body>
</html>

数据.json

barGraph: [
  {
    "name": "A",
    "value": 4
  },
  {
    "name": "AAA",
    "value": 10
  },
  {
    "name": "B",
    "value": 40
  },
  {
    "name": "BB",
    "value": 20
  },
  {
    "name": "BBB",
    "value": 7
  }
]

我们得到的错误

chart.js

来源：https://stackoverflow.com/questions/74189623/how-to-integrate-mustache-template-to-read-json-data-and-dynamically-display-it

1条答案

按热度按时间

6fe3ivhb1#

可以使用data.json得结构为dataset.data，但是为了使CHART.JS能够正确读取数据，需要在图表级设置options.parsing选项，如下所示：

options: {   
  parsing: {
    xAxisKey: 'name',
    yAxisKey: 'value'
  }    
}

参见CHART.JS文档：https://www.chartjs.org/docs/latest/general/data-structures.html#object-using-custom-properties
第一个

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

我来回答

如何集成mustache模板读取json数据并在Chartjs中动态显示

1条答案

相关问题

热门标签

最新问答