мин, макс. порог в старших чартах - PullRequest
Новая
       1

мин, макс. порог в старших чартах

3 голосов
/ 10 декабря 2011

@ Hightcharts акции Как я могу иметь два порога? для минимума, максимума на этом графике http://jsfiddle.net/CYJAk/16/

В качестве примера здесь есть только один установленный порог http://jsfiddle.net/gh/get/jquery/1.6/highslide-software/highcharts.com/tree/master/samples/stock/demo/area/

или

вместо опции порога в старших чартах, есть ли способ показать красные точки / точки, когда они выпадают из min: max range?

Ответы [ 4 ]

6 голосов
/ 10 апреля 2012

Лучшим способом решения этой проблемы является добавление двух линий графика на графике, указывающих минимальные и максимальные допустимые значения.

Допустим, вы хотите применить это к оси y и установить минимум 100и максимум 500, вам может понравиться так: 

var min = 100;
var max = 500;

yAxis: {

                min: min - 100,
                max: max + 100,
                plotLines: [{
                    id: 'limit-min',
                    color: '#FF0000',
                    dashStyle: 'ShortDash',
                    width: 2,
                    value: min,
                    zIndex: 0
                }, {
                    id: 'limit-max',
                    color: '#FF0000',
                    dashStyle: 'ShortDash',
                    width: 2,
                    value: max,
                    zIndex: 0
                }]
            }

Причина добавления и вычитания 100 к максимальным и минимальным значениям состоит в том, что мы хотим, чтобы линии графика были видны на графике.1006 *

Надеюсь, это поможет.

0 голосов
/ 08 апреля 2013

Основываясь на ответе, я создал быстрый пример кода.Я думаю, что если у вас есть красная линия для минимума, вы можете ясно увидеть, какие точки падают ниже вашего допустимого минимума.

Полный код: 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>How to add min and max thresholds in Highcharts</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Sales By Month',
            },
            subtitle: {
                text: 'Metrics',
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Revenue'
                },
                plotLines: [{

                color: '#FF0000',
                dashStyle: 'ShortDash',
                width: 2,
                value: 22,
                zIndex: 0,
                label : {
                    text : 'Goal'
                }
            }, {
                color: '#008000',
                dashStyle: 'ShortDash',
                width: 2,
                value: 10,
                zIndex: 0,
                label : {
                    text : 'Loss'
                }
            }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': $'+ this.y;
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'Revenue',
                data: [21000, 24000, 27500, 33000, 29000, 26000, 19000, 21000, 25000, 29000, 23000, 18000]
            }]
        });
    });

});
        </script>
    </head>
    <body>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>

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

    </body>
</html>

Рабочая демонстрация на Edit Fiddle здесь .Это может помочь вам.

0 голосов
/ 06 февраля 2013

Основываясь на ответе, я создал быстрый пример кода.Я думаю, что если у вас есть красная линия для минимума, вы можете ясно увидеть, какие точки падают ниже вашего допустимого минимума.

Полный код: 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>How to add min and max thresholds in Highcharts</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Sales By Month',
            },
            subtitle: {
                text: 'Metrics',
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Revenue'
                },
                plotLines: [{
                    id: 'limit-min',
                    color: '#FF0000',
                    dashStyle: 'ShortDash',
                    width: 2,
                    value: 22000,
                    zIndex: 0,
                    label : {
                        text : 'Last Year\'s Minimum Revenue'
                    }
                }, {
                    id: 'limit-max',
                    color: '#008000',
                    dashStyle: 'ShortDash',
                    width: 2,
                    value: 32000,
                    zIndex: 0,
                    label : {
                        text : 'Last Year\'s Maximum Revenue'
                    }
                }]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': $'+ this.y;
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'Revenue',
                data: [21000, 24000, 27500, 33000, 29000, 26000, 19000, 21000, 25000, 29000, 23000, 18000]
            }]
        });
    });

});
        </script>
    </head>
    <body>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>

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

    </body>
</html>

Рабочая демонстрация здесь .

0 голосов
/ 02 марта 2012

почему бы не отрендерить вторую полосу позади (или более) этой серии, которая содержит нормальный диапазон. Тогда вы сможете легко увидеть, какие точки выходят за пределы этого диапазона.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...