javascript - chart.js-折线图-我可以以某种方式可视化正/负变化吗？

我想可视化我的数据集的每个数据值是大于还是小于折线图中的先前值。

这是正常折线图的示例小提琴：jsfiddle.net/mrr1kp2t

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

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

最佳答案

您的问题似乎很有趣。因此，我继续并创建了以下图表插件，它将完成工作……

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>

关于javascript - chart.js-折线图-我可以以某种方式可视化正/负变化吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44148871/