某些系列在带有列的时间序列图表中不可见

Question

我想构建并显示一个按日期排列的包含 n 列的时间序列图表，但有些序列不可见。

这是图表：

4系不放大怎么看？只显示了2个。

当我点击一个系列进行设置时 visible/unvisible 它会隐藏或显示以前不可见的系列之一。

如果我想显示 10 个或更多系列怎么办？

我尝试使 div 可滚动并为图表设置宽度，但它也不起作用。

Highcharts.chart('container', {
    chart: {
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        },

    },
    yAxis: {
        min: 0
    },

    plotOptions: {
        series: {
        }
    },
    series: [{
        name: "1",
        type:'column',
        data: [
            [Date.UTC(1970, 9, 15), 0.5],
            [Date.UTC(1970, 9, 31), 0.5],
            [Date.UTC(1970, 10,  7), 0.5],
            [Date.UTC(1970, 10, 10), 0.5],
            [Date.UTC(1970, 11, 10), 0.5],
            [Date.UTC(1970, 11, 13), 0.5],
            [Date.UTC(1970, 11, 16), 0.5],
            [Date.UTC(1970, 11, 19), 0.5],
            [Date.UTC(1970, 11, 22), 0.5],
            [Date.UTC(1970, 11, 25), 0.5],
            [Date.UTC(1970, 11, 28), 0.5],
            [Date.UTC(1971, 0, 16), 0.5],
            [Date.UTC(1971, 0, 19), 0.5],
            [Date.UTC(1971, 0, 22), 0.5],
            [Date.UTC(1971, 0, 25), 0.5],
            [Date.UTC(1971, 0, 28), 0.5],
            [Date.UTC(1971, 0, 31), 0.5],
            [Date.UTC(1971, 1,  4), 0.5],
            [Date.UTC(1971, 1,  7), 0.5],
            [Date.UTC(1971, 1, 10), 0.5],
            [Date.UTC(1971, 1, 13), 0.5],
            [Date.UTC(1971, 1, 16), 0.5],
            [Date.UTC(1971, 1, 19), 0.5],
            [Date.UTC(1971, 1, 22), 0.5],
            [Date.UTC(1971, 1, 25), 0.5],
            [Date.UTC(1971, 1, 28), 0.5],
            [Date.UTC(1971, 2,  4), 0.5],
            [Date.UTC(1971, 2,  7), 0.5],
            [Date.UTC(1971, 2, 10), 0.5],
            [Date.UTC(1971, 2, 13), 0.5],
            [Date.UTC(1971, 2, 16), 0.5],
            [Date.UTC(1971, 2, 19), 0.5],
            [Date.UTC(1971, 2, 22), 0.5],
            [Date.UTC(1971, 2, 25), 0.5],
            [Date.UTC(1971, 2, 27), 0.5],
            [Date.UTC(1971, 2, 30), 0.5],
            [Date.UTC(1971, 3,  3), 0.5],
            [Date.UTC(1971, 3,  6), 0.5],
            [Date.UTC(1971, 3,  9), 0.5],
            [Date.UTC(1971, 3, 12), 0.5],
            [Date.UTC(1971, 3, 15), 0.5],
            [Date.UTC(1971, 3, 18), 0.5],
            [Date.UTC(1971, 3, 21), 0.5],
            [Date.UTC(1971, 3, 24), 0.5],
            [Date.UTC(1971, 3, 27), 0.5],
            [Date.UTC(1971, 3, 30), 0.5],
            [Date.UTC(1971, 4,  3), 0.5],
            [Date.UTC(1971, 4,  6), 0.5],
            [Date.UTC(1971, 4,  9), 0.5],
            [Date.UTC(1971, 4, 12), 0.5],
            [Date.UTC(1971, 4, 15), 0.5],
            [Date.UTC(1971, 4, 18), 0.5],
            [Date.UTC(1971, 4, 21), 0.5],
            [Date.UTC(1971, 4, 25), 0.5]
        ]
    }, {
        name: "2",
        type:'column',
        data: [
            [Date.UTC(1970, 9, 15), 1],
            [Date.UTC(1970, 9, 31), 1],
            [Date.UTC(1970, 10,  7),1],
            [Date.UTC(1970, 10, 10), 1],
            [Date.UTC(1970, 11, 10), 1],
            [Date.UTC(1970, 11, 13), 1],
            [Date.UTC(1970, 11, 16), 1],
            [Date.UTC(1970, 11, 19), 1],
            [Date.UTC(1970, 11, 22), 1],
            [Date.UTC(1970, 11, 25), 1],
            [Date.UTC(1970, 11, 28), 1],
            [Date.UTC(1971, 0, 16), 1],
            [Date.UTC(1971, 0, 19), 1],
            [Date.UTC(1971, 0, 22), 1],
            [Date.UTC(1971, 0, 25), 1],
            [Date.UTC(1971, 0, 28), 1],
            [Date.UTC(1971, 0, 31), 1],
            [Date.UTC(1971, 1,  4), 1],
            [Date.UTC(1971, 1,  7), 1],
            [Date.UTC(1971, 1, 10), 1],
            [Date.UTC(1971, 1, 13), 1],
            [Date.UTC(1971, 1, 16), 1],
            [Date.UTC(1971, 1, 19), 1],
            [Date.UTC(1971, 1, 22), 1],
            [Date.UTC(1971, 1, 25), 1],
            [Date.UTC(1971, 1, 28), 1],
            [Date.UTC(1971, 2,  4), 1],
            [Date.UTC(1971, 2,  7), 1],
            [Date.UTC(1971, 2, 10), 1],
            [Date.UTC(1971, 2, 13), 1],
            [Date.UTC(1971, 2, 16), 1],
            [Date.UTC(1971, 2, 19), 1],
            [Date.UTC(1971, 2, 22), 1],
            [Date.UTC(1971, 2, 25), 1],
            [Date.UTC(1971, 2, 27), 1],
            [Date.UTC(1971, 2, 30), 1],
            [Date.UTC(1971, 3,  3), 1],
            [Date.UTC(1971, 3,  6), 1],
            [Date.UTC(1971, 3,  9), 1],
            [Date.UTC(1971, 3, 12), 1],
            [Date.UTC(1971, 3, 15), 1],
            [Date.UTC(1971, 3, 18), 1],
            [Date.UTC(1971, 3, 21), 1],
            [Date.UTC(1971, 3, 24), 1],
            [Date.UTC(1971, 3, 27), 1],
            [Date.UTC(1971, 3, 30), 1],
            [Date.UTC(1971, 4,  3), 1],
            [Date.UTC(1971, 4,  6), 1],
            [Date.UTC(1971, 4,  9), 1],
            [Date.UTC(1971, 4, 12), 1],
            [Date.UTC(1971, 4, 15), 1],
            [Date.UTC(1971, 4, 18), 1],
            [Date.UTC(1971, 4, 21), 1],
            [Date.UTC(1971, 4, 25), 1]
        ]
    }, {
        name: "3",
        type:'column',
        data: [
            [Date.UTC(1970, 9, 15), 1.5],
[Date.UTC(1970, 9, 31), 1.5],
[Date.UTC(1970, 10,  7), 1.5],
[Date.UTC(1970, 10, 10), 1.5],
[Date.UTC(1970, 11, 10), 1.5],
[Date.UTC(1970, 11, 13), 1.5],
[Date.UTC(1970, 11, 16), 1.5],
[Date.UTC(1970, 11, 19), 1.5],
[Date.UTC(1970, 11, 22), 1.5],
[Date.UTC(1970, 11, 25), 1.5],
[Date.UTC(1970, 11, 28), 1.5],
[Date.UTC(1971, 0, 16), 1.5],
[Date.UTC(1971, 0, 19), 1.5],
[Date.UTC(1971, 0, 22), 1.5],
[Date.UTC(1971, 0, 25), 1.5],
[Date.UTC(1971, 0, 28), 1.5],
[Date.UTC(1971, 0, 31), 1.5],
[Date.UTC(1971, 1,  4), 1.5],
[Date.UTC(1971, 1,  7), 1.5],
[Date.UTC(1971, 1, 10), 1.5],
[Date.UTC(1971, 1, 13), 1.5],
[Date.UTC(1971, 1, 16), 1.5],
[Date.UTC(1971, 1, 19), 1.5],
[Date.UTC(1971, 1, 22), 1.5],
[Date.UTC(1971, 1, 25), 1.5],
[Date.UTC(1971, 1, 28), 1.5],
[Date.UTC(1971, 2,  4), 1.5],
[Date.UTC(1971, 2,  7), 1.5],
[Date.UTC(1971, 2, 10), 1.5],
[Date.UTC(1971, 2, 13), 1.5],
[Date.UTC(1971, 2, 16), 1.5],
[Date.UTC(1971, 2, 19), 1.5],
[Date.UTC(1971, 2, 22), 1.5],
[Date.UTC(1971, 2, 25), 1.5],
[Date.UTC(1971, 2, 27), 1.5],
[Date.UTC(1971, 2, 30), 1.5],
[Date.UTC(1971, 3,  3), 1.5],
[Date.UTC(1971, 3,  6), 1.5],
[Date.UTC(1971, 3,  9), 1.5],
[Date.UTC(1971, 3, 12), 1.5],
[Date.UTC(1971, 3, 15), 1.5],
[Date.UTC(1971, 3, 18), 1.5],
[Date.UTC(1971, 3, 21), 1.5],
[Date.UTC(1971, 3, 24), 1.5],
[Date.UTC(1971, 3, 27), 1.5],
[Date.UTC(1971, 3, 30), 1.5],
[Date.UTC(1971, 4,  3), 1.5],
[Date.UTC(1971, 4,  6), 1.5],
[Date.UTC(1971, 4,  9), 1.5],
[Date.UTC(1971, 4, 12), 1.5],
[Date.UTC(1971, 4, 15), 1.5],
[Date.UTC(1971, 4, 18), 1.5],
[Date.UTC(1971, 4, 21), 1.5],
[Date.UTC(1971, 4, 25), 1.5]
        ]
    },
    {
        name: "4",
        type:'column',
        data: [
            [Date.UTC(1970, 9, 15), 0],
            [Date.UTC(1970, 9, 31), 0.09],
            [Date.UTC(1970, 10,  7), 0.17],
            [Date.UTC(1970, 10, 10), 0.1],
            [Date.UTC(1970, 11, 10), 0.1],
            [Date.UTC(1970, 11, 13), 0.1],
            [Date.UTC(1970, 11, 16), 0.11],
            [Date.UTC(1970, 11, 19), 0.11],
            [Date.UTC(1970, 11, 22), 0.08],
            [Date.UTC(1970, 11, 25), 0.23],
            [Date.UTC(1970, 11, 28), 0.37],
            [Date.UTC(1971, 0, 16), 0.68],
            [Date.UTC(1971, 0, 19), 0.55],
            [Date.UTC(1971, 0, 22), 0.4],
            [Date.UTC(1971, 0, 25), 0.4],
            [Date.UTC(1971, 0, 28), 0.37],
            [Date.UTC(1971, 0, 31), 0.43],
            [Date.UTC(1971, 1,  4), 0.42],
            [Date.UTC(1971, 1,  7), 0.39],
            [Date.UTC(1971, 1, 10), 0.39],
            [Date.UTC(1971, 1, 13), 0.39],
            [Date.UTC(1971, 1, 16), 0.39],
            [Date.UTC(1971, 1, 19), 0.35],
            [Date.UTC(1971, 1, 22), 0.45],
            [Date.UTC(1971, 1, 25), 0.62],
            [Date.UTC(1971, 1, 28), 0.68],
            [Date.UTC(1971, 2,  4), 0.68],
            [Date.UTC(1971, 2,  7), 0.65],
            [Date.UTC(1971, 2, 10), 0.65],
            [Date.UTC(1971, 2, 13), 0.75],
            [Date.UTC(1971, 2, 16), 0.86],
            [Date.UTC(1971, 2, 19), 1.14],
            [Date.UTC(1971, 2, 22), 1.2],
            [Date.UTC(1971, 2, 25), 1.27],
            [Date.UTC(1971, 2, 27), 1.12],
            [Date.UTC(1971, 2, 30), 0.98],
            [Date.UTC(1971, 3,  3), 0.85],
            [Date.UTC(1971, 3,  6), 1.04],
            [Date.UTC(1971, 3,  9), 0.92],
            [Date.UTC(1971, 3, 12), 0.96],
            [Date.UTC(1971, 3, 15), 0.94],
            [Date.UTC(1971, 3, 18), 0.99],
            [Date.UTC(1971, 3, 21), 0.96],
            [Date.UTC(1971, 3, 24), 1.15],
            [Date.UTC(1971, 3, 27), 1.18],
            [Date.UTC(1971, 3, 30), 1.12],
            [Date.UTC(1971, 4,  3), 1.06],
            [Date.UTC(1971, 4,  6), 0.96],
            [Date.UTC(1971, 4,  9), 0.87],
            [Date.UTC(1971, 4, 12), 0.88],
            [Date.UTC(1971, 4, 15), 0.79],
            [Date.UTC(1971, 4, 18), 0.54],
            [Date.UTC(1971, 4, 21), 0.34],
            [Date.UTC(1971, 4, 25), 0]
        ]
    }],
});

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

<script src="https://code.highcharts.com/highcharts.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

Answer 1

要使图表可滚动，您可以使用 scrollablePlotArea 功能。

chart: {
    scrollablePlotArea: {
        minWidth: 1600
    }
}

现场演示： http://jsfiddle.net/BlackLabel/pm2ky5uw/

API参考：https://api.highcharts.com/highcharts/chart.scrollablePlotArea

但是，也许其他一些系列类型会以更明显的方式呈现数据？ Highcharts JS demos.

如果列是必须的，您也可以考虑使用 Highcharts Stock。

某些系列在带有列的时间序列图表中不可见

Some series are not visible in a time serie chart with columns

highcharts