在chart.js中创建水平线,但不创建图表的全长

时间:2018-10-04 15:08:05

标签: javascript vue.js charts

我需要在同一水平上有两条线,所以我找不到任何要限制或在图表上绘制水平线的东西。这条线是使用注释插件绘制的,但是可以选择设置线长。

enter image description here

因此,例如,我想在这行中使用2种颜色,或在两条线中使用不同的长度

代码:

 const ctx = document.getElementById('chart_1').getContext('2d');

            const ch = new Chart(ctx, {
                type: 'line',
                data: {
                    datasets: [{
                        labels: names,
                        data: values,
                        borderWidth: 1,
                        fill: false,
                        borderColor: 'rgb(0, 99, 255)',
                    }],
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                            },
                        }],
                    },
                    responsive: false,
                    annotation: {
                        drawTime: 'afterDraw',
                        annotations: [{
                                          type: 'line',
                                          mode: 'horizontal',
                                          scaleID: 'y-axis-0',
                                          value: 50000,
                                          borderColor: 'rgb(75, 192, 192)',
                                          borderWidth: 20,
                                          label: {
                                              backgroundColor: 'rgba(0,0,0,0)',
                                              fontColor: '#000',
                                              enabled: true,
                                              content: 'Test label',
                                          },
                                      },
                                      {
                                          type: 'line',
                                          mode: 'horizontal',
                                          scaleID: 'y-axis-0',
                                          value: 50000,
                                          borderColor: 'red',
                                          borderWidth: 20,
                                          label: {
                                              backgroundColor: 'rgba(0,0,0,0)',
                                              fontColor: '#000',
                                              enabled: true,
                                              content: 'Test label',
                                          },
                                      },
                        ],
                    },
                },
            });

U可以看到代码中有两行,但是红色在第一行上方。任何帮助表示赞赏。

0 个答案:

没有答案