ChartJS 图表和(更紧凑的)标题位置

guz6ccqo 于 2022-11-23 发布在 Chart.js

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

我正在使用Chartjs来处理一些简单的 Jmeter （使用饼图），但在添加标题时，它相距很远，填充似乎对我没有帮助：-（有人知道如何将标题放置在更靠近 Jmeter /饼图的位置吗？
image of title in pie/gauge chart here

var ctx103 = document.getElementById('chart103').getContext('2d');
new Chart(ctx103, {
  type: 'doughnut',
  data: {
    datasets: [{
      //label: '# of Votes',
      data: [80, 20],
      backgroundColor: ["green", "grey"]
    }]
  },
  options: {
    rotation: 270, // start angle in degrees
    circumference: 180, // sweep angle in degrees
    plugins: {
      title: {
        display: true,
        position: 'top',
        text: 'TITLE !!!!!',
        padding: {
          top: 0,
          bottom: 0
        }
      }
    }
  }
});

我一直在尝试不同的填充选项，但这只是移动标题更远...

chart.js

来源：https://stackoverflow.com/questions/74511457/chartjs-and-more-compact-title-placement

1条答案

按热度按时间

whlutmcx1#

虽然这可能不适用于您的特定应用程序，但在某些情况下，可以使用HTML/CSS来实现。
这是我使用的样式：

<style>
  #titleAndChart {
    margin: 0;
    position: absolute;
    height: 600px;
    width: 600px;
    box-sizing: border-box;
  }
  #titleDiv {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 600px;
  }
  #chartDiv {
    position: absolute;
    top: 60px;
    left: 0px;
    width: 600px;
  }
</style>

HTML布局将变为：

<div id="titleAndChart">
    <div id="titleDiv">
      Chart title goes here
    </div> 
    <div id='chartDiv'>
      <canvas id="myChart"></canvas>
    </div>
  </div>

图表本身看起来像这样：

Chart.defaults.doughnut.circumference = Math.PI;
Chart.defaults.doughnut.rotation = -1 * Math.PI;
new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  options: {
    legend: {
      display: false,
    }
  },
  data: {
    labels: ['Red','Green'],
    datasets: [{
      data: [25,75],
      backgroundColor: ['red','green']
    }]
  }
});

下面是一个使用ChartJS v2.9.4的小提琴：
https://jsfiddle.net/hdahle/4x670et8/
这是一个使用ChartJS v4.0.1的小提琴
https://jsfiddle.net/hdahle/k8zxvjyq/

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

我来回答

ChartJS 图表和(更紧凑的)标题位置

1条答案

相关问题

热门标签

最新问答