条形图在QuickChart中带有两套标签

发布于 2025-01-22 19:47:20 字数 987 浏览 2 评论 0原文

我正在尝试创建一个条形图，以跟踪使用 quickchart 。我希望该图表在栏上有一组标签（剩余％），每个栏内的第二组标签（剩余$）。

我能够在酒吧顶部找出标签，但是需要帮助，并在酒吧内添加第二组标签。条形内的标签将需要基于第二个数据数组。

我已经发布了我的代码，可以在实时编辑器

{
  type: 'bar',
  data: {
    labels: ['Food', 'Gas', 'Other'],
    datasets: [{
      label: 'Category',
      data: [.5, .7, .8]
    }]
  },
  options: {
        plugins: {
      datalabels: {
        formatter: function(value) {
            return Math.round(value*100) + '%';},
        anchor: 'end',
        align: 'end',
        color: 'black',
        labels: {
          percent: {
            font: {
              weight: 'bold',
              size:26,
            }
          }
        }
      }
    },
    scales: {
      yAxes: [ {
        type: 'linear',
        ticks: {
            beginAtZero: true,
            suggestedMin : 0,
            suggestedMax : 1,
            }
        }]
      } 
  }
}

原文

I am trying to create a bar chart for tracking a budget with quickchart. I want the chart to have one set of labels on top of the bars (for % remaining), and a second set of labels inside each bar (for $'s remaining).

I was able to figure out the labels on top of the bars, but need help adding a second set of labels within the bars. The labels within the bars will need to be based on a second array of data.

I have posted my code, which can be tweaked in the live editor here. Any help would be greatly appreciated!

{
  type: 'bar',
  data: {
    labels: ['Food', 'Gas', 'Other'],
    datasets: [{
      label: 'Category',
      data: [.5, .7, .8]
    }]
  },
  options: {
        plugins: {
      datalabels: {
        formatter: function(value) {
            return Math.round(value*100) + '%';},
        anchor: 'end',
        align: 'end',
        color: 'black',
        labels: {
          percent: {
            font: {
              weight: 'bold',
              size:26,
            }
          }
        }
      }
    },
    scales: {
      yAxes: [ {
        type: 'linear',
        ticks: {
            beginAtZero: true,
            suggestedMin : 0,
            suggestedMax : 1,
            }
        }]
      } 
  }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌酱 2025-01-29 19:47:20

除了datalabels.labels.percent，您还可以定义datalabels.labels.value，均具有特定的form> form> form> formatter和定位。无需定义第二个数据集，只需在现有数据集中定义amountremaining，然后在相应的form> formatter中引用它。

看起来如下...

{
  type: 'bar',
  data: {
    labels: ['Food', 'Gas', 'Other'],
    datasets: [{
      label: 'Category',
      data: [.5, .7, .8],
      amountRemaining: [300, 420, 480]
    }]
  },
  options: {
    plugins: {
      datalabels: {
        color: 'black',
        labels: {
          percent: {
            formatter: v => Math.round(v * 100) + '%',
            anchor: 'end',
            align: 'end',
            font: {
              weight: 'bold',
              size: 26,
            }
          },
          value: {
            formatter: (v, ctx) => ctx.chart.data.datasets[0].amountRemaining[ctx.dataIndex] + '
,
            font: {
              weight: 'bold',
              size: 26,
            }
          }
        }
      }
    },
    scales: {
      yAxes: [{
        type: 'linear',
        ticks: {
          beginAtZero: true,
          suggestedMin: 0,
          suggestedMax: 1,
        }
      }]
    }
  }
}

Beside datalabels.labels.percent, you could also define datalabels.labels.value, both with specific formatter and positioning. No need to define a second dataset, simply define amountRemaining inside the existing dataset and reference it in the corresponding formatter.

This could look as follows...

{
  type: 'bar',
  data: {
    labels: ['Food', 'Gas', 'Other'],
    datasets: [{
      label: 'Category',
      data: [.5, .7, .8],
      amountRemaining: [300, 420, 480]
    }]
  },
  options: {
    plugins: {
      datalabels: {
        color: 'black',
        labels: {
          percent: {
            formatter: v => Math.round(v * 100) + '%',
            anchor: 'end',
            align: 'end',
            font: {
              weight: 'bold',
              size: 26,
            }
          },
          value: {
            formatter: (v, ctx) => ctx.chart.data.datasets[0].amountRemaining[ctx.dataIndex] + '
,
            font: {
              weight: 'bold',
              size: 26,
            }
          }
        }
      }
    },
    scales: {
      yAxes: [{
        type: 'linear',
        ticks: {
          beginAtZero: true,
          suggestedMin: 0,
          suggestedMax: 1,
        }
      }]
    }
  }
}

回复收藏 0 原文

~没有更多了~