javascript - 使用 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);

<小时/>

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