使用chartjs在图表中连接2行

时间:2016-12-27 02:11:39

标签: asp.net vb.net chart.js

我使用chartjs绘制我的图表

https://i.stack.imgur.com/kPmQ6.png

在我的图表中,我希望连接1点线与其他线上的点,但我找不到解决方案 请帮帮我!

1 个答案:

答案 0 :(得分:0)

转到分散线图。在散点图中,您可以绘制独立的线。下面是快照
enter image description here

[<强>示例代码

var scatterChart = new Chart(ctx1, {
    type: 'line',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            borderColor: "rgba(33,150,243,1)",
              pointRadius : 0,
            data: [{
                x: 2,
                y: 22
            }, {
                x: 2,
                y: 28
            }]
        },
        {
            label: 'Scatter Dataset',
            borderColor: "rgba(33,150,243,1)",
              pointRadius : 0,
            data: [{
                x: 3,
                y: 20
            }, {
                x: 3,
                y: 25
            }]
        },
        {
            label: 'Scatter Dataset',
            borderColor: "rgba(33,150,243,1)",
              pointRadius : 0,
            data: [{
                x: 4,
                y: 21
            }, {
                x: 4,
                y: 27
            }]
        },
         {
            label: 'Scatter Dataset',
            fill : false,
              pointRadius : 0,
            borderColor: "rgba(244,67,54,1)",
            data: [{
                x: 2,
                y: 25
            }, {
                x: 3,
                y: 23
            },{
                x : 4,
                y : 23
            }]
        }
        ]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom',
                ticks : {
                    max : 10,
                    beginAtZero : true
                }
            }],
            yAxes: [{
                ticks : {
                    max : 30,
                    beginAtZero : true
                }
            }]

        }
    }
});