折线图 - 我可以以某种方式可视化积极/消极的变化吗?

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>