在chart.js中绘制折线图仅在值更改时放置点

dmS*_*azi 3 javascript charts chart.js

我正在使用chart.js在我的页面中使用图表我在x轴上的日期与我的y轴值(成本)有关.我想保持折线图继续其值,直到有变化并为此编码.这是输出

在此输入图像描述

在此标记为值是否相同我绘制了点.我可以选择删除所有点,但如果值与之前相同,我想删除点.(没有变化).我想知道这是否可行.如果请指导我如何去做?

它与标记为重复不一样......
我希望它们是真实的或基于价值的flse.如果值为零或与之前相同,则不显示点

这是我的代码

as.dashboard = {};

as.dashboard.adjustWidgetsHeight = function () {
    var maxHeight = 0;
    $(".panel-widget .panel-heading").height('auto');
    $(".panel-widget .panel-heading").each(function () {
        if ($(this).height() > maxHeight) {
            maxHeight = $(this).height();
        }
    });
    $(".panel-widget .panel-heading").height(maxHeight);
};

as.dashboard.initChart = function () {
    var data = {
        labels: dayss,


        //Number - Tension of the bezier curve between points
        bezierCurveTension : 0.4,

        datasets: [
            {
                label: "Machine costs History",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                bezierCurve : false,
                data: costVariations
            }
            , {
                label: "My third dataset", // This ONE IS DUMMY IT HELPS IN 
                                           // SOLVING OVERLAPPING TOOL TIPS
            }
        ]
    };

    var ctx = document.getElementById("myChart").getContext("2d");
    var myLineChart = new Chart(ctx).Line(data, {
        responsive: true,
        maintainAspectRatio: false,
        tooltipTemplate: "<%if (value!=0){%><%= value %> <%= units %> <%}%>",
        multiTooltipTemplate: "<%if (value!=0){%><%= value %> <%= units %> <%}%>",
    });
};

$(document).ready(function () {

    as.dashboard.adjustWidgetsHeight();
    as.dashboard.initChart();
});
Run Code Online (Sandbox Code Playgroud)

pot*_*ngs 9

...
for (var i = 1; i <= data.datasets[0].data.length - 1; i++) 
    if (data.datasets[0].data[i - 1] === data.datasets[0].data[i])
        myChart.datasets[0].points[i].display = false;
Run Code Online (Sandbox Code Playgroud)

其中myChart是您的图表对象


小提琴 - http://jsfiddle.net/3tok57dL/

  • 只需覆盖showTooltip即可拼出以上几点.见http://jsfiddle.net/3tok57dL/2/ (2认同)