Question

我只想显示最后一点。有人可以帮忙吗？

预期

Expected

实际

Actual

Answer 1

好，你好！

您可以将pointRadius设置为零，例如：

var myChart = new Chart(
    ctx, {
        type: 'line',
        data: {
            labels: [...]
            datasets: [
              {
                data: [...],
                pointRadius: 0,  # <<< Here.
              }
            ]
        },
        options: {}
    })

对于许多点（例如您的问题），将pointRadius更改为数组：

pointRadius: [0, 0, 0, 0, 0, 0, 5]

按照我在Fiddle中的完整示例

如果这对您有帮助，请查看

Answer 2

更新

当我提交我的信息时，我刚刚看到Edi的回答，他提到了pointRadius。我注意到这太混乱了，正如他所说，您可以传入一个数组来简化此过程。

我在下面编写了一种“增长”数组（随数据缩放）的方法，以确保最后一个数据点的半径> 0。

由于修改了本机的绘制功能，因此自定义折线图看起来更加平滑。

Chart.js 2.0引入了每个数据集的控制器的概念。像秤一样，可以根据需要编写新的控制器。

我复制了controller.line.js的源代码，并修改了draw()方法的循环以仅绘制最后一点。这是最简单的解决方案，无需弄清楚如何设置半径值数组。

/** Initialize array with radius of n and queue values ahead of it */
function pointRadiusLast(radius, length, initialArray) {
  var result = initialArray || [ radius ];
  while (result.length < length) result.unshift(0); // Place zeros in front
  return result;
}

// https://www.chartjs.org/docs/latest/developers/charts.html
var valueOrDefault = Chart.helpers.valueOrDefault;
const lineEnabled = (dataset, options) => valueOrDefault(dataset.showLine, options.showLines)
Chart.defaults.derivedLine = Chart.defaults.line;
var customController = Chart.controllers.line.extend({
  /** If you want to EXTEND the draw function.
  draw: function(ease) {
    Chart.controllers.line.prototype.draw.call(this, ease); // Override the super method
    var meta = this.getMeta();
    var pt0 = meta.data[0];
    var radius = pt0._view.radius;
    var ctx = this.chart.chart.ctx;
    ctx.save();
    // Custom drawing...
    ctx.restore();
  }
  
  If you want to OVERRIDE the draw function...
  */
  draw: function(ease) {
    var me = this;
    var chart = me.chart;
    var meta = me.getMeta();
    var points = meta.data || [];
    var area = chart.chartArea;
    var ilen = points.length;
    var halfBorderWidth;
    var i = 0;
    if (lineEnabled(me.getDataset(), chart.options)) {
      halfBorderWidth = (meta.dataset._model.borderWidth || 0) / 2;
      Chart.helpers.canvas.clipArea(chart.ctx, {
        left: area.left,
        right: area.right,
        top: area.top - halfBorderWidth,
        bottom: area.bottom + halfBorderWidth
      });
      meta.dataset.draw();
      Chart.helpers.canvas.unclipArea(chart.ctx);
    }
    // Draw the points
    for (; i < ilen; ++i) {
      if (i === ilen - 1) { // Only the last or simply... points[ilen - 1].draw(area)
        points[i].draw(area);
      }
    }
  }
});
Chart.controllers.derivedLine = customController; // Specify type on chart below

var data = [
  { month : 'January'  , low : 25, high : 43 },
  { month : 'February' , low : 27, high : 47 },
  { month : 'March'    , low : 35, high : 56 },
  { month : 'April'    , low : 44, high : 67 },
  { month : 'May'      , low : 54, high : 76 },
  { month : 'June'     , low : 63, high : 85 }
];

var additionalData = [
  { month : 'July'      , low : 68, high : 89 },
  { month : 'August'    , low : 66, high : 87 },
  { month : 'September' , low : 59, high : 81 },
  { month : 'October'   , low : 46, high : 69 },
  { month : 'November'  , low : 37, high : 59 },
  { month : 'December'  , low : 30, high : 48 }
];

var defaults = {
  fill: false,
  lineTension: 0.1,
  borderCapStyle: 'butt',
  borderDash: [],
  borderDashOffset: 0.0,
  borderJoinStyle: 'miter',
  pointBackgroundColor: "#fff",
  pointBorderWidth: 1,
  pointHoverRadius: 5,
  pointHoverBorderWidth: 2,
  //pointRadius: 0, <-- Do not specify this, we will supply it below
  pointHitRadius: 10
};

/** Initialize array with radius of n and queue values ahead of it */
function pointRadiusLast(radius, length, initialArray) {
  var result = initialArray || [ radius ];
  while (result.length < length) result.unshift(0);
  return result;
}

var dataSets = [
  Object.assign({
    label: "Low",
    backgroundColor: "rgba(75,192,192,0.4)",
    borderColor: "rgba(75,192,192,1)",
    pointBorderColor: "rgba(75,192,192,1)",
    pointHoverBackgroundColor: "rgba(75,192,192,1)",
    pointHoverBorderColor: "rgba(220,220,220,1)",
    data: data.map(item => item.low)
  }, defaults),
  Object.assign({
    label: "High",
    backgroundColor: "rgba(192,75,75,0.4)",
    borderColor: "rgba(192,75,75,1)",
    pointBorderColor: "rgba(192,75,75,1)",
    pointHoverBackgroundColor: "rgba(192,75,75,1)",
    pointHoverBorderColor: "rgba(192,75,75,1)",
    data: data.map(item => item.high)
  }, defaults)
];

var chartOptions = {
  title : {
    text : 'Weather Averages for Washington, DC',
    display : true
  },
  showLines: true
};

var defaultChart = Chart.Line(document.getElementById('default-line-chart'), {
  data: {
    labels: data.map(item => item.month),
    datasets: dataSets.map(dataset => $.extend(true, {}, dataset, {
      pointRadius : pointRadiusLast(5, data.length)
    }))
  },
  options : $.extend(true, {}, chartOptions, {
    title : {
      text : chartOptions.title.text + ' (Default)'
    }
  })
});

var customChart = new Chart(document.getElementById('custom-line-chart'), {
  type: 'derivedLine',
  data: {
    labels: data.map(item => item.month),
    datasets: dataSets.map(dataset => $.extend(true, {}, dataset, {
      pointRadius : 5
    }))
  },
  options : $.extend(true, {}, chartOptions, {
    title : {
      text : chartOptions.title.text + ' (Custom)'
    }
  })
});

setTimeout(function() {
  var category = 'month', fields = [ 'low', 'high' ];
  var counter = additionalData.length;
  var intervalId = setInterval(function() {
    if (counter --> 0) {
      var record = additionalData[additionalData.length - counter - 1];
      addData(defaultChart, record, category, fields);
      addData(customChart, record, category, fields);
    } else {
      clearInterval(intervalId);
    }
  }, 1000); // Update every second
}, 1000); // 1 second delay

function addData(chart, data, xField, yFields) {
  chart.data.labels.push(data[xField]);
  chart.data.datasets.forEach((dataset, i) => {
    dataset.data.push(data[yFields[i]]);
    if (chart.config.type === 'line') { // Only the normal Line chart
      dataset.pointRadius = pointRadiusLast(5, dataset.data.length);
    }
  });
  chart.update();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="default-line-chart" width="400" height="120"></canvas>
<canvas id="custom-line-chart" width="400" height="120"></canvas>

Chart.js仅是最后一点

2 个答案: