Question

我有一个基本的柱形图。对于较小的数据集，图表会显示应有的值。看到这个小提琴：

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

<div id="container" style="min-width: 600px; height: 400px; margin: 0 auto"></div>



Highcharts.chart('container', {
    "chart": {
        "type": "column"
    },
    "title": {
        "text": "High Net Income"
    },
    "xAxis": {
        "type": "datetime",
        "tickInterval": 604800000,
        "dateTimeLabelFormats": {
            "millisecond": "%m/%d/%Y",
            "second": "%m/%d/%Y",
            "minute": "%m/%d/%Y",
            "hour": "%m/%d/%Y",
            "day": "%m/%d/%Y",
            "week": "%m/%d/%Y",
            "month": "%m/%d/%Y",
            "year": "%m/%d/%Y"
        },
        "labels": {
            "rotation": -45
        }
    },
    "yAxis": {
        "min": 0,
        "title": {
            "text": "Audience Reach"
        }
    },
    "plotOptions": {
        "borderWidth": 0,
        "pointPadding": 0.2
    },
    "legend": {
        "enabled": false
    },
    "credits": {
        "enabled": false
    },
    "series": [{
        "name": "Distribution Count",
        "data": [
            [1504342376000, 6403],
            [1504423639000, 1086],
            [1504510033000, 1089]
        ]
    }, {
        "name": "Unique VELO Count",
        "data": [
            [1504342376000, 2973],
            [1504423639000, 597],
            [1504510033000, 599]
        ]
    }]
});

我喜欢它在特定日期并排显示每个系列。

然而，当数据集越来越大时，我会得到一些很少的1px叠加列，我不喜欢它一点，但我不知道我需要做些什么来保持列的旁边侧面，没有堆叠，并且具有可用的宽度。看到这个小提琴：

http://jsfiddle.net/hmg0y2a3/

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">

Highcharts.chart('container', {
    "chart": {
        "type": "column"
    },
    "title": {
        "text": "High Net Income"
    },
    "xAxis": {
        "type": "datetime",
        "tickInterval": 604800000,
        "dateTimeLabelFormats": {
            "millisecond": "%m/%d/%Y",
            "second": "%m/%d/%Y",
            "minute": "%m/%d/%Y",
            "hour": "%m/%d/%Y",
            "day": "%m/%d/%Y",
            "week": "%m/%d/%Y",
            "month": "%m/%d/%Y",
            "year": "%m/%d/%Y"
        },
        "labels": {
            "rotation": -45
        }
    },
    "yAxis": {
        "min": 0,
        "title": {
            "text": "Audience Reach"
        }
    },
    "plotOptions": {
        "borderWidth": 0,
        "pointPadding": 0.2
    },
    "legend": {
        "enabled": false
    },
    "credits": {
        "enabled": false
    },
    "series": [{
        "name": "Distribution Count",
        "data": [
            [1504342376000, 6403],
            [1504423639000, 1086],
            [1504510033000, 1089],
            [1504597165000, 1103],
            [1504683776000, 1099],
            [1504770376000, 1210],
            [1504858167000, 1242],
            [1504942932000, 1224],
            [1505027910000, 1227],
            [1505114658000, 1229],
            [1505201998000, 1214],
            [1505289935000, 1110],
            [1505289941000, 1110],
            [1505418941000, 930],
            [1505419065000, 930]
        ]
    }, {
        "name": "Unique VELO Count",
        "data": [
            [1504342376000, 2973],
            [1504423639000, 597],
            [1504510033000, 599],
            [1504597165000, 598],
            [1504683776000, 590],
            [1504770376000, 637],
            [1504858167000, 636],
            [1504942932000, 625],
            [1505027910000, 628],
            [1505114658000, 639],
            [1505201998000, 638],
            [1505289935000, 617],
            [1505289941000, 617],
            [1505418941000, 557],
            [1505419065000, 557]
        ]
    }]
});

Answer 1

尝试为plotOptions中的系列对象设置静态pointWidth：如下所示：

"plotOptions": {
    "series": {
        "pointWidth": 15
    },
},

API参考：http://api.highcharts.com/highcharts/series%3Cbar%3E.pointWidth

现场工作：http://jsfiddle.net/daniel_s/qetr9p0p/

祝你好运！

Answer 2

系列中的日期是个问题。如果我通过设置为UTC并截断到日期来改变日期，那么条形图将不会堆叠，如果有超过12个数据点，它们将不会是1px宽：

time_series = broadcast_data.time_series_data[b];
date = new Date(time_series.broadcast_dt);
date = Date.UTC(date.getFullYear(),date.getMonth(),date.getDate());

Highcharts柱形图。有时无法使用1px堆叠列。有时可以使用并排列

2 个答案: