Вертикальная линия Chart.js при наведении и тень на линии - PullRequest
Новая
       59

Вертикальная линия Chart.js при наведении и тень на линии

0 голосов
/ 04 марта 2019

Итак, я использую Chart.js для своего проекта, и это то, что я видел в PSD.enter image description here

ОК.Я начал исследовать вопрос и фактически нашел ответ на свой вопрос.Отдельно.

Для вертикальной линии - Перемещение вертикальной линии при наведении на график с использованием chart.js

Для тени - https://jsfiddle.net/dces93wv/ или https://github.com/chartjs/Chart.js/issues/4977

Но в течение нескольких часов я не мог понять, как объединить эти два метода.: (

const ShadowLineElement = Chart.elements.Line.extend({
  draw () {
  
    const { ctx } = this._chart

    const originalStroke = ctx.stroke

    ctx.stroke = function () {
      ctx.save()
      ctx.shadowColor = 'red'
      ctx.shadowBlur = 0
      ctx.shadowOffsetX = 0
      ctx.shadowOffsetY = 8
      originalStroke.apply(this, arguments)
      ctx.restore()
    }
    
    Chart.elements.Line.prototype.draw.apply(this, arguments)
    
    ctx.stroke = originalStroke;
  }
})

Chart.defaults.ShadowLine = Chart.defaults.line
Chart.controllers.ShadowLine = Chart.controllers.line.extend({
  datasetElementType: ShadowLineElement
})

new Chart(document.getElementById('canvas'), {
      type: 'ShadowLine',
      data: {
        datasets: [
          {
          	label: 'somedata',
            fill: false,
            borderColor: 'green',
          	data: [
            	10, 20
            ]
          }
        ]
      }
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<p>
<b style="color: red">red</b> is shadow
</p>
<canvas id="canvas" width="200" height="100"></canvas>

1 Ответ

0 голосов
/ 07 марта 2019

Вы можете настроить различные вещи с помощью библиотеки Chart Js ( docs ).

Чтобы добавить тени к линиям диаграммы, вы можете использовать Chart.controllers.line и создать функцию для рисования тени.

Пример для теней: 

let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line = Chart.controllers.line.extend({
    draw: function() {
        draw.apply(this, arguments);
        let ctx = this.chart.chart.ctx;
        let _stroke = ctx.stroke;
        ctx.stroke = function() {
            ctx.save();
            ctx.shadowColor = '#000000';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 4;
            _stroke.apply(this, arguments)
            ctx.restore();
        }
    }
});

И для создания вертикальных линий вы можете использовать Chart.defaults.LineWithLine и создать функцию для рисования и вертикальной линии.

Пример: 

Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
   draw: function(ease) {
      Chart.controllers.line.prototype.draw.call(this, ease);

      if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
         var activePoint = this.chart.tooltip._active[0],
             ctx = this.chart.ctx,
             x = activePoint.tooltipPosition().x,
             topY = this.chart.scales['y-axis-0'].top,
             bottomY = this.chart.scales['y-axis-0'].bottom;

         // draw line
         ctx.save();
         ctx.beginPath();
         ctx.moveTo(x, topY);
         ctx.lineTo(x, bottomY);
         ctx.lineWidth = 2;
         ctx.strokeStyle = '#07C';
         ctx.stroke();
         ctx.restore();
      }
   }
});

следуйте полному коду вашего вопроса в моей Fiddle

...