Question

我正在使用Chart JS 2.0.1在页面上绘制图表。

我的客户要求我在条形图中添加一行，以便他们可以看到他们无法检查的限制。像那样：Bar chart with line on y axes

所以，我正在尝试将条形图扩展为一个新的条形图，它采用一个名为 lineAtValue 的参数，该参数提供该行的y值。

我成功地扩展了条形图，但它覆盖了页面中显示的其他条形图，我不需要在其他条形图中。

我希望能够有这样的东西：jsfiddle.net/L3uhpvd5/（对不起，我不能上传两个以上的链接）

Chart.barWithLine(ctx,config);

但是使用Chart JS的2.0.1版本

谢谢，

Ptournem

Answer 1

Chart 2.x版本支持混合类型图表。您可以创建如下配置： -

var config = {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      type: 'bar',
      label: "My First dataset",
      data: [65, 0, 80, 81, 56, 85, 40],
      fill: false
    },{
        type: 'line',
      label: "My Second dataset",
      data: [80, 80, 80, 80, 80, 80, 80],
      fill: false,
      borderColor: 'red',
      pointStyle: 'line',
      pointBorderWidth: 3
    }]    
  }
};

在这里创建了Js Fiddle：https://jsfiddle.net/nehadeshpande/eu70wzo4/

如果这有用，请告诉我。

谢谢， NEHA

Answer 2

这很有帮助，但我发现不是为了实际上不是数据的行添加新数据集而优化的。

我最终成功地创建了扩展条形类型的新类型，并在提供值时添加了一行。

// Store the original Draw function
var originalLineDraw = Chart.controllers.bar.prototype.draw;
// extend the new type
Chart.helpers.extend(Chart.controllers.bar.prototype, {
    draw: function () {
    // use the base draw function
    originalLineDraw.apply(this, arguments);

    // get chart and context
    var chart = this.chart;
    var ctx = chart.chart.ctx;

    // get lineAtValue value
    var value = chart.config.lineAtValue;

    // stop if it doesn't exist
    if (typeof value === "undefined") {
        return;
    }

    // draw the line
    var xaxis = chart.scales['x-axis-0'];
    var yaxis = chart.scales['y-axis-0'];
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(xaxis.left, yaxis.getPixelForValue(value));
    ctx.strokeStyle = '#ff0000';
    ctx.lineTo(xaxis.right, yaxis.getPixelForValue(value));
    ctx.stroke();
    ctx.restore();

    }
});

但是，谢谢你的帮助=）

Answer 3

如果这有帮助，我会将@Ptournem回复重写为有效的2.3.0插件，并进行某种配置

Chart.plugins.register({
    config: {
        /** @type {rbg|rgba|hex}  Stroke color */
        strokeColor: "rgb(255, 0, 0)",

        /** @type {int}  Column width */
        lineWidth: 1,
    },

    afterDatasetsDraw: function(chartInstance, easing) {
        var value = chartInstance.config.lineAtValue;

        if (typeof value === 'undefined') return;

        var ctx   = chartInstance.chart.ctx,
            xaxis = chartInstance.scales['x-axis-0'],
            yaxis = chartInstance.scales['y-axis-0'];

        ctx.save();
        ctx.beginPath();
        ctx.moveTo(xaxis.left, yaxis.getPixelForValue(value));
        ctx.lineWidth   = this.config.lineWidth;
        ctx.strokeStyle = this.config.strokeColor;
        ctx.lineTo(xaxis.right, yaxis.getPixelForValue(value));
        ctx.stroke();
        ctx.restore();
    },

    // IPlugin interface
    afterDatasetsUpdate: function(chartInstance) {},
    afterDraw: function(chartInstance, easing) {},
    afterEvent: function(chartInstance, event) {},
    afterInit: function(chartInstance) {},
    afterScaleUpdate: function(chartInstance) {},
    afterUpdate: function(chartInstance) {},
    beforeRender: function(chartInstance) {},
    beforeDatasetsDraw: function(chartInstance, easing) {},
    beforeDatasetsUpdate: function(chartInstance) {},
    beforeDraw: function(chartInstance, easing) {},
    beforeEvent: function(chartInstance, event) {},
    beforeInit: function(chartInstance) {},
    beforeUpdate: function(chartInstance) {},
    destroy: function(chartInstance) {},
    resize: function(chartInstance, newChartSize) {},
});

将Chart JS 2上的条形图扩展为新类型的图表

3 个答案: