使用Chart.Js

Question

我试图通过使用一些jquery插件来实现线图，该线图显示最高和最低坐标为绿色和红色点，如下所示。我选择了 Chart.js 库，因为它是免费且开源的，并且具有响应性。我能够使用chart.js创建折线图，但问题是我无法做以下事情

1. 我只需要在图表中的彩色点下面的最低（红色）和最高（绿色）坐标，现在它显示点下的所有坐标
2. 隐藏图表标签的任何选项。
3. 如何显示图表下方的最高和最低坐标

任何人都可以告诉我一些解决方案吗

我的代码如下所示

Working Demo

的JavaScript

var lineData = {
    labels: ["Jan", "Feb", "March", "April", "May", "June", "July"],
    datasets: [{
        fillColor: "rgba(255,255,255,0)",
        strokeColor: "rgba(102,45,145,1)",
        pointColor: "rgba(102,45,145,1)",
        pointStrokeColor: "#fff",
        data: [69.4, 48.8, 99.4, 48.2, 10.3, 50.5]
    }]
}

var lineOptions = {
    animation: true,
    pointDot: true,
    scaleOverride : true,
    scaleShowGridLines : false,
    scaleShowLabels : false,
    scaleSteps : 4,
    scaleStepWidth : 25,
    scaleStartValue : 0,
};

//Create Line chart
var ctx = document.getElementById("lineChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(lineData, lineOptions);

HTML

<canvas id="lineChart" width="800" height="250"></canvas>

Answer 1

您可以将图表扩展为1.，使用showScale选项执行2.并使用DOM操作（或支持它的javascript库）来执行3.

预览

<强> HTML

...
<ul><li id="min"><span></span></li><li id="max"><span></span></li></ul>

<强> CSS

#min, #max {
    float: left;
    margin-right: 2em;
    font-family: Verdana;
    font-size: 12px;
}
#min > span, #max > span {
    color: rgba(145,145,145,1);
}
#min {
    color: red;
}
#max {
    color: green;
}

<强>脚本

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var max = Math.max.apply(null, data.datasets[0].data);
        document.getElementById("max").firstChild.innerText = max;
        var min = Math.min.apply(null, data.datasets[0].data);
        document.getElementById("min").firstChild.innerText = min;
        this.datasets[0].points.forEach(function (point) {
            if (point.value === max)
                point._saved.fillColor = point.highlightFill = point.fillColor = 'green';
            else if (point.value === min)
                point._saved.fillColor = point.highlightFill = point.fillColor = 'red';
            else
                point.inRange = function() { return false }
        })
    }
});

然后

    ...
    showScale: false,
};

//Create Line chart
var ctx = document.getElementById("lineChart").getContext("2d");
var myNewChart = new Chart(ctx).LineAlt(lineData, lineOptions);

小提琴 - http://jsfiddle.net/py2mcfyk/2/