angular-chart.js:在Y坐标相等的情况下,在彼此上显示线(阶梯状线图)

时间:2018-10-26 12:43:41

标签: javascript angularjs charts chart.js angular-chart

我在angular-chart.js(http://jtblin.github.io/angular-chart.js/)中有一个阶梯状的折线图,其中显示了一些数据,其中包含y坐标(这些是进程的状态)和秒(x坐标)。

Stepped line chart picture

我的问题是,如果我有两个具有相同x和y值的过程,那么只有其中一个可见。 我想知道的是,在值相等的情况下,我所有的数据都应该可见。

<div>
     <canvas id="mychart"
             class="chart chart-line"
             chart-data="vm.data"
             chart-series="vm.series"
             chart-options="vm.options"
             chart-colors="vm.colors"
             width="350"
             height="200">
     </canvas>
</div>

数据如下:

data: [[{x: 0, y: 1}, {x: 1, y: 1}], [{x: 0, y: 2}, {x: 1, y: 1}]]

选项:

options = {
        animation: {
            duration: 0
        },
        hover: {
            mode: null
        },
        tooltips: {
            enabled: false,
        },
        elements: {
            line: {
                tension: 0,
                stepped: true,
                fill: false,
                borderDash: []
            }
        },
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom',
                ticks: {
                    reverse: true,
                    beginAtZero: true,
                    stepSize: 1,
                    max: MAX_VALUE,
                }
            }],
            yAxes: [{
                ticks: {
                    min: -1,
                    stepSize: 1,
                    maxRotation: 45,
                    minRotation: 45,
                    max: 10
                    }
                }
            }]
        }
    };

有人有什么想法,如何解决这个问题?

0 个答案:

没有答案