使用 Chart.Js 绘制最高（绿色）和最低（红色）坐标

Question

我正在尝试通过使用一些 jquery 插件来实现将最高坐标和最低坐标显示为绿点和红点的折线图，如下所示。我选择了 Chart.js 库，因为它是免费和开源的，并且响应迅速。我能够使用 chart.js 创建折线图，但问题是我无法执行以下操作

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

谁能告诉我一些解决方案

我的代码如下

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

Fiddle - http://jsfiddle.net/py2mcfyk/2/

使用 Chart.Js 绘制最高（绿色）和最低（红色）坐标

Highest (green) and Lowest (red) coordinates plot using Chart.Js

javascript

jquery

linegraph

chart.js