Chart.JS条形图与行组合无法正确呈现

时间:2018-02-19 18:59:36

标签: javascript c# chart.js

我有一个图表可以正确呈现为2个散点图,我想将第一个数据集更改为条形图,但是一旦我这样做,就没有正确渲染,而是作为一条扁平线。

我的图表创建代码如下:

    const chartInstance = new Chart(ctx, {
        type: 'scatter',
        data: chartData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            onClick: onClickChart,

            scales: {
                xAxes: [{
                    ticks: {
                        min: -4,
                        max: 4
                    }
                }],
                yAxes: [{
                    id: 'A',
                    type: 'linear',
                    position: 'right',
                    display: false,
                    ticks: {
                        min: 0,
                        max: 0.4
                    }
                },
                {
                    id: 'B',
                    type: 'linear',
                    position: 'left',
                }]
            }
        }
        });
}

然后填充数据集:

    chart.datasets.push({
        type: "scatter",
        label: "Frequency",
        data: new Array<XYPair>(),
        borderColor: config.lineColors.red,
        borderWidth: 1,
        fill: false,
        yAxisID: "B",
    });

    chart.datasets.push({
        type: "scatter",
        label: "Ideal",
        data: new Array<XYPair>(),
        borderColor: config.lineColors.blue,
        borderWidth: 1,
        fill: false,
        yAxisID: "A",
    });

    // gauss segments
    for (let val in data.segments) {
        let x: XYPair = {
            x: data.segments[val].label, y: data.segments[val].count
        };

        chart.datasets[0].data.push(x);
    }

    // ideal line
    for (let val in data.gaussCurve) {
        let x: XYPair = {
            x: data.gaussCurve[val].x, y: data.gaussCurve[val].y
        };

        chart.datasets[1].data.push(x);
    }

我的数据是X,Y对,根据文档应该有效。我使用X / Y数据来匹配线和区域之间的X轴。看来我的xAxis因为变化而搞砸了。可能是因为我没有加载任何标签? 如果是这样的话,你如何匹配来自不同集合的标签,因为一个数据集比另一个集合具有更多的潜力。

0 个答案:

没有答案