如何在 angular 4 中创建迷你折线图

Question

我想创建一个迷你图，它将采用像

这样的数组值

[{"sNo":224,"val":3},{"sNo":220,"val":1},{"sNo":224 ,"val":2},....]

当鼠标悬停时，应该在图表上显示 sNo 和 val 的值。

我试图找到解决这个问题的方法，但没有任何帮助。

我找到的一个解决方案是将数组值 [3,1,2] 作为输入并显示在图表中，但我需要 sNo 和 val 的值。

希望问题很清楚。请帮忙。谢谢。

Answer 1

您可以尝试将 char.js 与 chartType= line

一起使用

HTML 模板：

 <canvas baseChart
                [chartType]="'line'"
                [datasets]="YourchartData"
                [labels]="Yourlabels"
                [options]="YourOptions"
                elements: {
                      line: {
                         borderColor: '#000000',
                         borderWidth: 1
                },
                point: {
                       radius: 0
                       }
                },
                scales: {
                      yAxes: [
                       {
                         display: false
                       }
                    ],
                     xAxes: [
                      {
                        display: false
                      }
                  ]
                }
                [legend]="true"
                [colors]="colors"
                height="....">
        </canvas>

当然要在 app.module 中安装并导入 char.js。

希望对你有所帮助

如何在 angular 4 中创建迷你折线图

How to create a sparkline line graph in angular 4

sparklines

angular