Самый высокий (зеленый) и самый низкий (красный) график координат с использованием Chart.Js

Я пытаюсь получить линейный график, который показывает самые высокие и самые низкие координаты в виде зеленых и красных точек, как показано ниже, с помощью некоторых плагинов jquery. Я выбрал библиотеку Chart.js, так как она бесплатная, с открытым исходным кодом и отзывчивый. Мне удалось создать линейный график с помощью chart.js, но проблема в том, что я не смог сделать следующее.

введите здесь описание изображения

  1. Мне нужны только самые низкие (красные) и самые высокие (зеленые) координаты под цветными точками на графике, сейчас он показывает все координаты под точками
  2. Любой вариант, чтобы скрыть маркировку графика.
  3. Как показать самые высокие и самые низкие координаты под графиком

Может ли кто-нибудь сказать мне какое-нибудь решение для этого

Мой код приведен ниже

Рабочая демонстрация

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>

javascript jquery chart.js linegraph
person Alex Man    schedule 06.12.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете расширить диаграмму, чтобы сделать 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/

person potatopeelings    schedule 06.12.2015
comment
кроме самой высокой и самой низкой точки на графике показаны координаты других точек - person Alex Man; 07.12.2015
comment
Вы имеете в виду всплывающие подсказки? Просто измените функцию inRange (см. обновленный ответ) - person potatopeelings; 08.12.2015