Наложение линии на графике.график js

Мне было интересно, можно ли наложить линию поверх диаграммы.график js, например, линейный график ? Например, на оси x горизонтальная линия будет нарисована со значением 20 поперек графика

7
chart.js javascript

3 ответов

Я создал что-то, называемое диаграммой наложения, которую я добавил в свою вилку диаграммы.js (https://github.com/leighquince/Chart.js), который может быть использован в этой ситуации. он работает так же, как линия или гистограмма, только разница в том, что вы объявляете дополнительное свойство под названием type это может быть либо 'line' или 'bar'. Тогда просто позвоните new Chart(ctx).Overlay(data).

так что для вашего примера вы можете просто иметь свою гистограмму, а затем предоставить другой набор данных (с некоторыми лучше цвета, чем я использовал), чтобы показать линию.

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "My First dataset",
    //new option, barline will default to bar as that what is used to create the scale
    type: "line",
    fillColor: "rgba(220,220,220,0.2)",
    strokeColor: "rgba(0,0,0,0.6)",
    pointColor: "rgba(0,0,0,0.6)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    datasetFill:false,
    data: [20, 20, 20, 20, 20, 20, 20]
  }, {
    label: "My First dataset",
    //new option, barline will default to bar as that what is used to create the scale
    type: "bar",
    fillColor: "rgba(220,20,220,0.2)",
    strokeColor: "rgba(220,20,220,1)",
    pointColor: "rgba(220,20,220,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [32, 25, 33, 88, 12, 92, 33]
  }]
};
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).Overlay(data, {
  responsive: false
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script>

<canvas id="canvas" width="400"></canvas>
6

мне нужно было что-то подобное, но вместо строки графика мне нужна была настоящая линия наложения, которая была плоской.

просто расширил график так:

    Chart.types.Bar.extend({
        name: 'BarOverlay',
        draw: function (ease) {
            Chart.types.Bar.prototype.draw.apply(this);
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)';
            ctx.moveTo(35, this.scale.calculateY(100));
            ctx.lineTo(this.scale.calculateX(this.datasets[0].bars.length), this.scale.calculateY(100));
            ctx.stroke();
        }
    });

Mine жестко закодирован, чтобы нарисовать линию на отметке " 100 " (в этом случае, когда мы смотрели на цель 100%).

и назовите это так:

new Chart(ctx).BarOverlay(data, options);

Я также обнаружил, что код айвы устарел и не совместим с диаграммой 1.0.2.код js как-то (рендеринг пошли все боком).

6

ответ StrangeWill был отличным в качестве основы, но мне нужны были управляемые данными вертикальные линии на гистограмме, поэтому изменили его следующим образом:

сначала я добавил свойство в массив опций (добавление другого набора данных, возможно, чище, но мне пришлось бы сказать ChartJS игнорировать его), где каждый параметр является индексом значения данных, который я хочу выделить, примерно следующим образом:

ChartDefaults.verticalOverlayAtBar = [itemOne, itemTwo]
...
var HistoryChart = new Chart(ctx).BarOverlay(ChartData, ChartDefaults);

затем я изменил код StrangeWill, расширяя его для итерации массива элементов из выше и нарисуйте вертикальные линии на указанной полосе.

Chart.types.Bar.extend({
    name: 'BarOverlay',
    draw: function (ease) {

        // First draw the main chart
        Chart.types.Bar.prototype.draw.apply(this);

        var ctx = this.chart.ctx;
        var barWidth = this.scale.calculateBarWidth(this.datasets.length);

        for (var i = 0; i < this.options.verticalOverlayAtBar.length; ++i) {

            var overlayBar = this.options.verticalOverlayAtBar[i];

            // I'm hard-coding this to only work with the first dataset, and using a Y value that I know is maximum
            var x = this.scale.calculateBarX(this.datasets.length, 0, overlayBar);
            var y = this.scale.calculateY(2000);

            var bar_base = this.scale.endPoint

            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)';
            ctx.moveTo(x, bar_base);
            ctx.lineTo(x, y);
            ctx.stroke();
        }
        ctx.closePath();
    }
});

это не идеально, поскольку я не знаком с кодом internals ChartJs, в частности, мои строки были 2 барами, хотя я подозреваю, что это ошибка fencepost в массиве данных, а не вычисления диаграммы. Однако, надеюсь, это полезный шаг вперед для кого-то другого.

2