更新 - 响应性增加：

Question

我使用chartjs创建了一个组合双条形图。我的代码如下。条形组合双图工作正常，但我有一个要求为绿色条形图添加一条线，连接其所有顶部中间点。我有点画了一个连接绿色图的线图，但我面临的问题是线图点不在绿色条形图的顶部中间，如下所示。

任何人都可以告诉我如何在条形图的顶部中间制作线点

HTML

<canvas id="canvas"></canvas>

JS

var barChartData = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            type: 'bar',
              label: "Visitor",
                data: [10, 59, 340, 521, 450, 200, 195],
                fill: false,
                backgroundColor: "rgba(220,220,220,0.5)",
                borderColor: '#71B37C',
                hoverBackgroundColor: '#71B37C',
                hoverBorderColor: '#71B37C'

        }, {
            type: 'bar',
              label: "Visitor",
                data: [200, 185, 590, 621, 250, 400, 95],
                fill: false,
                backgroundColor: '#71B37C',
                borderColor: '#71B37C',
                hoverBackgroundColor: '#71B37C',
                hoverBorderColor: '#71B37C'

        }, {

                type:'line',
                data: [200, 185, 590, 621, 250, 400, 95],
                fill: false,
                borderColor: '#EC932F',
                backgroundColor: '#EC932F',
                pointBorderColor: '#EC932F',
                pointBackgroundColor: '#EC932F',
                pointHoverBackgroundColor: '#EC932F',
                pointHoverBorderColor: '#EC932F'

        } ]
    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
            responsive: true,
            tooltips: {
              mode: 'label'
          },
          elements: {
            line: {
                fill: false
            }
        },
          scales: {
            xAxes: [{
                display: true,
                gridLines: {
                    display: false
                },
                labels: {
                    show: true,
                }
            }],
            yAxes: [{
                type: "linear",
                display: true,
                position: "left",
                id: "y-axis-1",
                gridLines:{
                    display: false
                },
                labels: {
                    show:true,

                }
            }, {
                type: "linear",
                display: true,
                position: "right",
                id: "y-axis-2",
                gridLines:{
                    display: false
                },
                labels: {
                    show:true,

                }
            }]
        }
        }
        });
    };

Answer 1

要更改特定图表的显示，您必须编辑整个图表的配置。

在内部深处，您将找到需要为特定图表更改的属性（在您的情况下，折线图）。

<小时/> 如果您尝试深入搜索，最终会找到x＆amp;折线图的y属性，存储在myBar.config.data.datasets[2].metaData[i]._model（很难找到，我承认）。

然后，您只需将其添加到您的代码中（在生成myBar之后）：

// For each value of your line chart ...
for (var i = 0; i < myBar.config.data.datasets[2].metaData.length; i++) {
    // Get the bar width associated to this value  
    var barWidth = myBar.config.data.datasets[1].metaData[i]._model.width;
    // Get the percentage that the bar is taking in the graph
    var barPercentage = myBar.config.options.scales.xAxes[0].barPercentage;

    // Add the width of the bar / (2*percentage) -- which is the half of the bar
    myBar.config.data.datasets[2].metaData[i]._model.x += barWidth / (2*barPercentage);
    // Also edit the controlPointNext and controlPointPrevious to change the bezier curve display
    myBar.config.data.datasets[2].metaData[i]._model.controlPointNextX += barWidth / (2*barPercentage);
    myBar.config.data.datasets[2].metaData[i]._model.controlPointPreviousX += barWidth / (2*barPercentage);
}

检查the plunker以获取完整代码。

<小时/> 以下是最终结果：

更新 - 响应性增加：

要使图表响应，您需要在Chart.js plugins内实现循环。

使用插件可以处理创建，更新和渲染图形时触发的所有事件。

我们将特别编辑afterUpdate事件，每次更新时都会触发该事件（例如调整大小）。

Chart.pluginService.register({
    afterUpdate: function(chart) {
        // Loop in here
    }
});

以下是another fiddle，其中包含最终结果，具有响应性。

请注意条形图是在第一行之后绘制的（我不知道为什么）所以我不得不降低alpha的酒吧背景颜色。

条形图顶部中间的折线图点

1 个答案:

更新 - 响应性增加：