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

【问题标题】：Drawing line chart in chart.js placing dots only when value changes在chart.js中绘制折线图仅在值更改时放置点
【发布时间】：2016-03-12 11:18:47
【问题描述】：

我在我的页面中使用 chart.js 我在我的 x 轴日期上使用图表，而在我的 y 轴值（成本）上。我想保持折线图继续其价值，直到发生变化并为此进行编码。这是输出

如果值相同，则在此标记中，我绘制了点。我可以选择删除所有点，但如果值与以前的值相同，我想删除点。（没有变化）。我想知道这是否可行。如果请指导我如何去做？

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

这是我的代码

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();
});

【问题讨论】：

Control which lines have points?的可能重复
我希望它们是真实的或基于价值的虚假。如果值为零或与以前相同，则不显示点
您可以遍历输入数据并在值相等时隐藏点，例如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[2].display = false; - 我可能在索引中犯了一些错误，但您几乎明白了。 ..
我想到了，但后来我会错过 x 轴上的日子。因此它不会显示适当固定价格的时期。如附图所示。我们有很长一段时间的价格在 33 左右，它应该在图表中显示出来！
display = false 只是没有将点显示为在线上的“点”，该点仍会占用图表上的空间 - 试一试。或者更好的是，试一试，如果它不起作用，请在问题中加入小提琴。干杯！

标签： javascript charts chart.js

【解决方案1】：

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

myChart 是您的图表对象

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

【讨论】：

我们可以在这些值上禁用工具提示吗？
只需覆盖 showTooltip 即可拼接出以上几点。见jsfiddle.net/3tok57dL/2