Question

我有一个合并的BarLineChart。是否有可能在生产线附近添加标签（在这种情况下，销售额从2015年到2016年增加了多少）？

我希望有一些方法

This is what i have so far

I want this

由于

Answer 1

最简单的方法是使用提供chart.js的同一团队提供的chartjs-plugin-annotation插件。

您可以使用该插件在图表上绘制任意行或框，其中也可以包含标签。不幸的是，该插件还不支持点注释，所以你必须使用一点点黑客才能显示标签而不是行或框。

以下是使用插件在特定Y值处绘制水平白线的示例图表（使用白色以便它与图表背景混合并变为不可见）。该行配置为还具有标签。最终结果是图表上没有可见线的文本注释。

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan 21st', 'Feb 21st'],
    datasets: [{
      type: 'line', 
      label: 'B',
      data: [10, 25],
      fill: false,
      borderWidth: 3,
      borderColor: chartColors.orange,
      lineTension: 0,
    }, {
      type: 'bar',
      label: 'A',
      backgroundColor: chartColors.blue,
      data: [10, 25],
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],  
      xAxes: [{
        ticks: {
          min: 'Jan 21st',
          max: 'Apr 21st',
        }
      }],
    },
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'horizontal',
        scaleID: 'y-axis-0',
        value: 18,
        borderColor: 'white',
        borderWidth: 0,
        label: {
          xAdjust: -50,
          fontSize: 16,
          fontColor: 'black',
          backgroundColor: 'white',
          content: "+20%",
          enabled: true
        }
      }],
      drawTime: 'beforeDatasetsDraw'
    }
  }
});

您可以在此codepen看到它的实际效果。

最后要注意的是，如果您在应用中添加了该插件，并且您还使用了不使用刻度的图表（例如饼图/甜甜圈），那么您将收到错误消息。这是一个已知问题，已记录here。

解决方法是将其添加到您的饼图/圆环图表配置中（或者将其添加到饼图/圆环图全局默认配置可能更容易）。

scales:{
  yAxes: [],
  xAxes: []
},

Chart.js在组合图表中显示靠近线的标签

1 个答案: