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

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与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);
}

检查plunker是否有完整的代码.

以下是最终结果:

更新 - 响应性增加:

要使图形响应,您需要在Chart.js插件中实现循环.

通过插件,您可以处理在创建,更新和渲染图形时触发的所有事件.

我们将特别编辑afterUpdate事件,每当有更新(例如调整大小)时触发该事件.

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

这是最后结果的另一个小提琴,它是响应性的.

请注意,条形图是在第一行之后绘制的(我不知道为什么)所以我不得不降低alpha条形背景颜色.