将 Chart JS 2 上的条形图扩展为一种新型 Chart答案

【问题标题】：Extend bar chart on Chart JS 2 into a new type of Chart将 Chart JS 2 上的条形图扩展为一种新型 Chart
【发布时间】：2017-08-08 21:21:43
【问题描述】：

我实际上是在使用 Chart JS 2.0.1 在页面上绘制图表。

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

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

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

这是我所做的：http://jsfiddle.net/d5ye1xpe/

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

Chart.barWithLine(ctx,config);

但是使用 Chart JS 的 2.0.1 版本

谢谢，

普图尔内姆

【问题讨论】：

标签： javascript jquery charts chart.js

【解决方案1】：

如果这有帮助，我会重写 @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) {},
});

【讨论】：

对我来说效果很好。请注意，如果您使用 HorizontalBar，则有 2 行发生变化：ctx.moveTo(xaxis.getPixelForValue(value), yaxis.top); 和 ctx.lineTo(xaxis.getPixelForValue(value), yaxis.bottom);。

【解决方案2】：

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/

如果这有帮助，请告诉我。

谢谢，尼哈

【讨论】：

【解决方案3】：

这很有帮助，但我发现它并没有针对实际上不是数据的行添加新数据集进行优化。

我终于成功地创建了扩展 bar 类型的新类型，如果提供了值，则添加一行。

// 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();

    }
});

但感谢您的帮助 =)

【讨论】：