如何在 Javascript 中的图表上将文本显示为系列？

Question

我如何将只是标签的系列添加到如下所示的图表中？

我很乐意使用任何图表 Javascript 库，例如 ECharts、Chartist、Chartjs。我认为 Chartjs 是最简单的。

基本上我正在尝试编写自动为歌曲创建图形乐谱的软件 - 它输出一个大的组合图表，音量作为一条线，音调作为另一条线，滤波器截止作为另一条线，和弦作为文本在一条水平线上。大约有 3500 个 x 轴点（时间样本）。

我查看了所有三个图表库的所有画廊，但找不到一种方法来显示文本，甚至是条形图上的标签并使条形本身不可见。

Answer 1

您可以在 HighCharts 中使用 scatter 系列类型来执行此操作。您将为所有点赋予相同的 y 值，以便它们出现在图表中的单行中：

data: [{x: 0, y: 50, name: 'D'},{x: 2, y: 50, name: 'A'},{x: 3, y: 50, name: 'G'},{x: 4, y: 50, name: 'D'},{x: 5, y: 50, name: 'G'},{x: 6, y: 50, name: 'F'}]

然后您可以修改点以不渲染（无标记）：

    plotOptions: {
        scatter: {
            marker: {
                radius: 0,
                states: {
                    hover: {
                        enabled: false,
                    }
                }
            },
...

然后使显示的标签是音符的标签而不是 y 值：

    dataLabels: {
        enabled: true,
        borderRadius: 5,
        backgroundColor: 'rgba(252, 255, 197, 0.7)',
        borderWidth: 1,
        borderColor: '#AAA',
        y: -6,
        formatter: function() {
            var s = this.point.name;
            return s;
        }
    },

如果需要，您还需要隐藏 tooltip。我在示例中通过不显示任何工具提示来暴力破解。您可能想在您的图例中包含或不包含笔记系列 - 我禁用了它。

dataLabel 的格式非常基本，但您可以根据需要设置样式。

这里正在工作jsFiddle。

Answer 2

在 Highcharts 中，最简单的方法是使用注释模块：

现场演示：http://jsfiddle.net/BlackLabel/vhscjrua/

文档：https://www.highcharts.com/docs/advanced-chart-features/annotations-module

您还可以使用任何类型的具有右定位数据标签的系列：

Highcharts.chart('container', {
    chart: {
        events: {
            load: function() {
                var points = this.series[0].points;
                Highcharts.each(points, function(point) {
                    point.dataLabel.attr({
                        y: 20
                    });
                });
            }
        }
    },
    series: [{
        color: 'rgba(0,0,0,0)',
        zIndex: 0,
        dataLabels: {
            enabled: true
        },
        data: [1, 4, 5, 2, 1, 7]
    }]
});

现场演示：http://jsfiddle.net/BlackLabel/op1k0Lg2/

如何在 Javascript 中的图表上将文本显示为系列？

How to show text as a series on a chart in Javascript?

javascript

highcharts

chart.js

echarts

chartist.js