Блог

Главная - Вопросы по программированию - Highcharts streamgraph метки по оси Y

Highcharts streamgraph метки по оси Y

#javascript #highcharts

#javascript #highcharts

Вопрос:

Я использую Highcharts Stream graph, и все работает нормально, за исключением того, что метки yaxis идут неправильно. Даже на странице примера ось Y поровну разделена на две части, а средняя точка равна нулю, а все остальные метки относятся к ней.

Я хочу, чтобы метки отображали значение, которое фактически находится на графике.

 Highcharts.chart('container', {

    chart: {
        type: 'streamgraph'
    },

    legend: {
        enabled: false
    },

    // Data parsed with olympic-medals.node.js
    series: [{
        name: "Finland",
        data: [
            0, 11, 4, 3, 6, 0, 0, 6, 9, 7, 8, 10, 5, 5, 7, 9, 13, 7, 7, 6, 12, 7, 9, 5, 5
        ]
    }, {
        name: "Austria",
        data: [
            0, 3, 4, 2, 4, 0, 0, 8, 8, 11, 6, 12, 11, 5, 6, 7, 1, 10, 21, 9, 17, 17, 23, 16, 17
        ]
    }, {
        name: "Sweden",
        data: [
            0, 2, 5, 3, 7, 0, 0, 10, 4, 10, 7, 7, 8, 4, 2, 4, 8, 6, 4, 3, 3, 7, 14, 11, 15
        ]
    }, {
        name: "Norway",
        data: [
            0, 17, 15, 10, 15, 0, 0, 10, 16, 4, 6, 15, 14, 12, 7, 10, 9, 5, 20, 26, 25, 25, 19, 23, 26
        ]
    }]
}); 
 <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/streamgraph.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>

Ответ №1:

Вот как streamgraph работает серия, пожалуйста, ознакомьтесь с официальным примером: https://www.highcharts.com/demo/streamgraph — области смещены вокруг центральной оси, ось y не имеет значения.

Пожалуйста, также проверьте streamStacker функцию в исходном коде модуля: https://code.highcharts.com/modules/streamgraph.src.js

Я рекомендую вам использовать areaspline ряды со штабелированием, если вы хотите использовать ось y.

     chart: {
        type: 'areaspline'
    },

    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },

Живой пример: http://jsfiddle.net/blackLabel/o4drspjq/