Line Segment Styling

Using helper functions to style each segment. Gaps in the data (‘skipped’) are set to dashed lines and segments with values going ‘down’ are set to a different color.

Line Segment Styling - 图1

config segmentUtils genericOptions

1. const config = {
2. type: 'line',
3. data: {
4. labels: Utils.months({count: 7}),
5. datasets: [{
6. label: 'My First Dataset',
7. data: [65, 59, NaN, 48, 56, 57, 40],
8. borderColor: 'rgb(75, 192, 192)',
9. segment: {
10. borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),
11. borderDash: ctx => skipped(ctx, [6, 6]),
12. },
13. spanGaps: true
14. }]
15. },
16. options: genericOptions
17. };

1. const skipped = (ctx, value) => ctx.p0.skip || ctx.p1.skip ? value : undefined;
2. const down = (ctx, value) => ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;

1. const genericOptions = {
2. fill: false,
3. interaction: {
4. intersect: false
5. },
6. radius: 0,
7. };

Docs