如何在chartjs中获得2点的线跨度？

Question

我目前有一个带有动态线和水平静态线的图表： 现在，代码手动输入水平数据点 50 次：

var data1 = {
            datasets: [
                {
                    backgroundColor: 'rgba(75, 192, 192, 0.2)', 
                    borderColor: 'rgba(75, 192, 192, 1)', 
                    data: [0.94, 0.25, 0.57, 1.01, 0.62, 1.28, 1.65, 0.01, 3.01, 0.94, 1.26, 0.6, 0.32, 0.69, 1.77, 1.03, 0.89, 0.79, 0.63, 1.16, 0.52, 2.08, 1.17, 1.05, 0.77, 0.88, 0.64, 0.83, 0.13, 0.44, 0.71, 0.39, 1.12, 1.57, 0.35, 0.95, 0.92, 1.55, 1.64, 1.46, 1.72, 0.67, 1.46, 0.74, 1.1, 2.07, 1.36, 1.04, 0.16, 1.21, 1.15], 
                    fill: 'start', 
                    label: 'National'
                }, 
                {
                    backgroundColor: 'rgba(153, 102, 255, 0.2)', 
                    borderColor: 'rgba(153, 102, 255, 1)', 
                    data: [1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01, 1.01], 
                    fill: 'start', 
                    label: 'NJIT', 
                    spanGaps: true
                }
            ], 
            labels: ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY']
        };

有没有办法指定水平线或指定开始（1.01）和结束（1.01）并将其连接在中间？我尝试过跨度间隙，但没有成功。

Answer 1

除了使用

Array.prototype.fill

或

Array.from

等函数来避免重复常量值之外：

   data: Array(51).fill(1.01)

或

   data: Array.from({length: 51}, ()=>1.01)

（保持所有中间值可见的好处或不便，包括工具提示）——至少有两种方法可以从第一个点到最后一个点绘制线条，这将是唯一出现在地图。

第一个，已经在发布的代码中使用

spanGaps: true

进行了处理，但这需要用

null

填充所有 49 个中间位置：

   data:[1.01, ...Array(49).fill(null), 1.01], 

jsFiddle

中的示例

另外，可以只用

x

和

y

坐标指定两个点， 如文档中所述：

data:[{x: 'AL', y: 1.01}, {x: 'WY', y: 1.01}], 

不需要

spanGaps:true

jsFiddle

中的示例