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

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

我希望有办法

---

谢谢

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

您可以使用该插件在图表上绘制任意线条或方框，这些线条或方框也可以包含标签。不幸的是，该插件还不支持点注释，因此您必须使用一些技巧来启用标签，但不显示线或框

下面是一个示例图表，它使用插件在特定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'
    }
  }
});

你可以在这里看到它的作用

最后请注意，如果您在应用程序中包含插件，并且您使用的图表不使用刻度（例如饼/甜甜圈），那么您将得到一个错误。这是一个已知问题，已被记录

解决方法是将其添加到pie/doughnut图表配置中（或者更容易将其添加到pie/doughnut全局默认配置中）

---

嘿，这看起来很有希望，但是如果我实现了annotations插件，我会收到一条错误消息：无法读取未定义的属性“xAxes”。当前我的页面上有多个图表。饼图显示此错误。您是否尝试将

批注

属性添加到全局配置或其他内容？这在您的情况下不起作用，因为饼图/甜甜圈图没有比例，因此注释插件无法与这些图表类型一起工作。是的，我刚刚将文件导入html，因此是否有某种解决方法，以便我仍然可以使用其他图表？看起来这是一个已登录的github。我将更新我的答案，直到它被修复。

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