是否可以将折线图与混合图表中的左边距对齐？ [英] Is it able to align line chart at left margin in mixed chart?

问题描述

我想按如下方式在混合图表的左边缘对齐折线图。

I'd like to align line chart at left margin in mixed chart as follow.

但是当我在数据中添加折线图时，它会根据现有的条形图自动对齐中心，如下所示。

But when I added line chart in data, it's automatically aligned to centers according to existing bar chart as follow.

< a href = https://jsfiddle.net/daehyung/cvekgadf/4/ rel = nofollow noreferrer> https://jsfiddle.net/daehyung/cvekgadf/4/

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
            type: 'bar',
        label: 'A',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
    },
    {
            type: 'line',           
        label: 'B',
        data: [10, 8, 2, 3, 1, 2],
        borderWidth: 1,
        steppedLine: true
            }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}
});

推荐答案

没有办法完全通过在chart.js。浏览完源代码后，我看到折线图在组合条形图上显示时在内部设置了 offset = true 属性。

There is no way to do this purely by configuration in chart.js. After browsing through the source, I see that line charts get set with a offset = true property internally when they appear on a combo bar chart.

因此，实现此行为的唯一方法是扩展折线图并实现您自己的函数来控制此 offset 变量的设置。事实证明，这样做并不难。这是一个示例（请注意， offset 变量仅在折线图的 updateElement（）函数中设置）。

Therefore, the only way to achieve this behavior is to extend the line chart and implement your own function to control the setting of this offset variable. It turns out it's not that difficult to do. Here is an example (note, the offset variable is only set in the line chart's updateElement() function).

var helpers = Chart.helpers;

Chart.controllers.LineNoOffset = Chart.controllers.line.extend({
  updateElement: function(point, index, reset) {
    var me = this;
    var meta = me.getMeta();
    var custom = point.custom || {};
    var dataset = me.getDataset();
    var datasetIndex = me.index;
    var value = dataset.data[index];
    var yScale = me.getScaleForId(meta.yAxisID);
    var xScale = me.getScaleForId(meta.xAxisID);
    var pointOptions = me.chart.options.elements.point;
    var x, y;
    var labels = me.chart.data.labels || [];
    var includeOffset = false;

    // Compatibility: If the properties are defined with only the old name, use those values
    if ((dataset.radius !== undefined) && (dataset.pointRadius === undefined)) {
      dataset.pointRadius = dataset.radius;
    }
    if ((dataset.hitRadius !== undefined) && (dataset.pointHitRadius === undefined)) {
      dataset.pointHitRadius = dataset.hitRadius;
    }

    x = xScale.getPixelForValue(typeof value === 'object' ? value : NaN, index, datasetIndex, includeOffset);
    y = reset ? yScale.getBasePixel() : me.calculatePointY(value, index, datasetIndex);

    // Utility
    point._xScale = xScale;
    point._yScale = yScale;
    point._datasetIndex = datasetIndex;
    point._index = index;

    // Desired view properties
    point._model = {
      x: x,
      y: y,
      skip: custom.skip || isNaN(x) || isNaN(y),
      // Appearance
      radius: custom.radius || helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, pointOptions.radius),
      pointStyle: custom.pointStyle || helpers.getValueAtIndexOrDefault(dataset.pointStyle, index, pointOptions.pointStyle),
      backgroundColor: me.getPointBackgroundColor(point, index),
      borderColor: me.getPointBorderColor(point, index),
      borderWidth: me.getPointBorderWidth(point, index),
      tension: meta.dataset._model ? meta.dataset._model.tension : 0,
      steppedLine: meta.dataset._model ? meta.dataset._model.steppedLine : false,
      // Tooltip
      hitRadius: custom.hitRadius || helpers.getValueAtIndexOrDefault(dataset.pointHitRadius, index, pointOptions.hitRadius)
    };
  },
});

一旦定义了新的图表类型，则必须更改配置以使用此新类型。

Once your new chart type is defined, then you have to change your configuration to use this new type.

这是一个 codepen示例显示最终结果（并演示如何执行此操作）。

Here is a codepen example showing the final result (and demonstrating how to do this).

这篇关于是否可以将折线图与混合图表中的左边距对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！