javascript - Can we draw a Line Chart with both solid and dotted line in it? - Stack Overflow

admin管理员组

文章数量:1321037

In real time analytics, you might want to state explicitly, that the present day has not been over yet and the data for the day is inplete.

So, you might want to draw the line that joins the last and the penultimate point with a dotted stroke.

This is how Mixpanel does it.

Can this be done using the Chart JS v2 pre-alpha?

In real time analytics, you might want to state explicitly, that the present day has not been over yet and the data for the day is inplete.

So, you might want to draw the line that joins the last and the penultimate point with a dotted stroke.

This is how Mixpanel does it.

Can this be done using the Chart JS v2 pre-alpha?

• javascript
• analytics
• chart.js

Share Improve this question Follow asked Jul 15, 2015 at 9:14 Arijit BhattacharyaArijit Bhattacharya 1,2851212 silver badges1212 bronze badges 1

• I'm using the Mixpanel chart library where I use .MPChart to set up my charts. Can this dotted line be done this way? It doesn't happen automatically like the mixpanel. client. – stealthysnacks Commented Jan 6, 2017 at 19:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Yes, but you have to work around a couple of glitches

Warning: Sub-optimal example to work around glitches

var lineChartData = {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [{
        label: "My First dataset",
        data: [1, 8, 3, 4, 2, 3, 4],
        borderColor: '#66f',
        borderDash: [20, 30]
    },{
        label: "My First dataset",
        data: [1, 8, 3, 4, 2, , ],
        borderColor: '#66f',
    }]
};

var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
    type: "line",
    data: lineChartData,
    options: {
        elements: {
            line: {
                fill: false
            }
        }
    }
});

Notice that the first dataset doesn't have the values set to blank and that 2nd dataset has one extra value than required - these effectively work around a couple of glitches (including https://github./nnnick/Chart.js/issues/1284)

---

Fiddle - https://jsfiddle/uwb8357r/

本文标签： javascriptCan we draw a Line Chart with both solid and dotted line in itStack Overflow