我们可以绘制一个包含实线和虚线的折线图吗?

Can we draw a Line Chart with both solid and dotted line in it?(我们可以绘制一个包含实线和虚线的折线图吗?)
本文介绍了我们可以绘制一个包含实线和虚线的折线图吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在实时分析中,您可能想明确指出,今天还没有结束,当天的数据不完整.

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 incomplete.

因此,您可能想用虚线画出连接最后一个点和倒数第二个点的线.

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

这就是 Mixpanel 的做法.

This is how Mixpanel does it.

这可以使用 Chart JS v2 pre-alpha 完成吗?

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

推荐答案

是的,但你必须解决一些小故障

Yes, but you have to work around a couple of 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
            }
        }
    }
});

请注意,第一个数据集没有将值设置为空白,而第二个数据集有一个超出要求的额外值 - 这些有效地解决了几个故障(包括 https://github.com/nnnick/Chart.js/issues/1284)

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.com/nnnick/Chart.js/issues/1284)

小提琴 - https://jsfiddle.net/uwb8357r/

这篇关于我们可以绘制一个包含实线和虚线的折线图吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)