Расширение линейного графика с пользовательской линией

Я пытаюсь расширить линейный график в Chart.js с помощью этого кода:

var shotsData = {
  labels: ["Shot 1", "Shot 2", "Shot 3", "Shot 4", "Shot 5"],
  datasets: [{ data: [5, 7, 1, 4, 9] }]
};

var ctx = document.getElementById("shots").getContext("2d");

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function () {
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(0, 15);
        this.chart.ctx.lineTo(159, 274);
        this.chart.ctx.stroke();

        Chart.types.Line.prototype.initialize.apply(this, arguments);
    }
});

new Chart(ctx).LineAlt(shotsData);

Это рисует мою диаграмму, но мне также нужна пользовательская линия в диаграмме, которая написана внутри функции initialize, но это, похоже, не работает. Когда я удаляю строку Chart.types.Line.prototype.initialize.apply(this, arguments);, отображается пользовательская строка.

Вот скрипка

http://jsfiddle.net/92ANv/5/


charts chart.js html5-canvas
person Lars    schedule 05.08.2014    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Вы можете переопределить функцию рисования, чтобы добавить свой рисунок на холст.

draw: function () {
    //call the super draw
    Chart.types.Line.prototype.draw.apply(this, arguments);

    //now your custom line
    this.chart.ctx.beginPath();
    this.chart.ctx.moveTo(0, 5);
    this.chart.ctx.lineTo(100, 100);
    this.chart.ctx.stroke();
}

скрипка http://jsfiddle.net/leighking2/5Lgzvu3r

person Quince    schedule 11.08.2014