Question

我想想象一下我的数据集的每个数据值是否大于或小于折线图中的先前值。

这是一个普通折线图的示例：jsfiddle.net/mrr1kp2t

最理想的是，我想在每个指向上方或下方的点上方有一个箭头。

有没有一种简单的方法可以完成这项工作？到目前为止，我所做的最好的工作是改变每个点的点颜色，但这并不直观。箭头很容易理解。

Answer 1

你的问题似乎很有意思。所以，我继续创建了下面的图表插件，这将完成工作......

Chart.plugins.register({
   afterDatasetsDraw: function(c) {
      let ctx = c.ctx;
      let prevY;
      c.data.datasets.forEach(function(e, i) {
         let meta = c.getDatasetMeta(i);
         if (meta.hidden) return;
         meta.data.forEach(function(e) {
            let x = e.tooltipPosition().x;
            let y = e.tooltipPosition().y;
            let radius = e._model.radius;
            let moveY = prevY && (y < prevY ? y - (radius * 3) : y + (radius * 3));
            let lineY = prevY && (y < prevY ? y - (radius * 2) : y + (radius * 2));
            let color = prevY && (y < prevY ? 'green' : 'red');

            // draw arrow
            ctx.save();
            ctx.fillStyle = color;
            ctx.beginPath();
            ctx.moveTo(x, moveY);
            ctx.lineTo(x + radius, lineY);
            ctx.lineTo(x - radius, lineY);
            ctx.closePath();
            ctx.fill()
            ctx.restore();
            prevY = y;
         })
      });
   }
});

<强>ᴅᴇᴍᴏ

Chart.plugins.register({
   afterDatasetsDraw: function(c) {
      let ctx = c.ctx;
      let prevY;
      c.data.datasets.forEach(function(e, i) {
         let meta = c.getDatasetMeta(i);
         if (meta.hidden) return;
         meta.data.forEach(function(e) {
            let x = e.tooltipPosition().x;
            let y = e.tooltipPosition().y;
            let radius = e._model.radius;
            let moveY = prevY && (y < prevY ? y - (radius * 3) : y + (radius * 3));
            let lineY = prevY && (y < prevY ? y - (radius * 2) : y + (radius * 2));
            let color = prevY && (y < prevY ? 'green' : 'red');

            // draw arrow
            ctx.save();
            ctx.fillStyle = color;
            ctx.beginPath();
            ctx.moveTo(x, moveY);
            ctx.lineTo(x + radius, lineY);
            ctx.lineTo(x - radius, lineY);
            ctx.closePath();
            ctx.fill()
            ctx.restore();
            prevY = y;
         })
      });
   }
});

var canvas = document.getElementById('myChart');
var data = {
   labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
   datasets: [{
      label: "My First Dataset",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "rgba(75,192,192,1)",
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: "rgba(75,192,192,1)",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "rgba(75,192,192,1)",
      pointHoverBorderColor: "rgba(220,220,220,1)",
      pointHoverBorderWidth: 2,
      pointRadius: 5,
      pointHitRadius: 10,
      data: [65, 59, 80, 40, 56, 55, 40],
   }]
};
var option = {
   responsive: false,
   scales: {
      yAxes: [{
         ticks: {
            beginAtZero: true,
            max: 100,
            stepSize: 20
         }
      }]
   }
};
var myLineChart = Chart.Line(canvas, {
   data: data,
   options: option
});

function adddata() {
   myLineChart.data.datasets[0].data[7] = 50;
   myLineChart.data.labels[7] = "test add";
   myLineChart.update();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

chart.js - 折线图 - 我能以某种方式想象正面/负面的变化吗？

1 个答案: