Question

如何将仅作为标签的系列添加到如下所示的图表中？

我很高兴使用任何图表Javascript库，例如ECharts，Chartist，Chartjs。我认为Chartjs最简单。

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

我已经浏览了所有三个制图库的所有画廊，但是找不到一种方法来显示文本，甚至无法在条形图上显示标签并使条形本身不可见。

Answer 1

您可以通过使用scatter系列类型在HighCharts中进行此操作。您将为所有点赋予相同的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

您也可以将任何类型的序列使用正确定位的数据标签：

 environment:
            DATABASE_HOST: db
            DATABASE_USER: user
            DATABASE_PASSWORD: password
            DATABASE_NAME: db
            DATABASE_PORT: "3306"

实时演示：http://jsfiddle.net/BlackLabel/op1k0Lg2/

如何在JavaScript图表上以序列显示文本？

2 个答案: