TypeScript highcharts.chart函数代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了TypeScript中highcharts.chart函数的典型用法代码示例。如果您正苦于以下问题：TypeScript chart函数的具体用法？TypeScript chart怎么用？TypeScript chart使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。

在下文中一共展示了chart函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: test_basic

function test_basic() {
    Highcharts.chart('container', {
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        title: {
            text: 'Highcharts Annotations'
        },
        series: [{
            type: 'line',
            data: [{ y: 29.9, id: 'min' }, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, { y: 216.4, id: 'max' }, 194.1, 95.6, 54.4]
        }],
        annotations: [{
            labels: [{
                point: 'max',
                text: 'Max'
            }, {
                point: 'min',
                text: 'Min',
                backgroundColor: 'white'
            }]
        }]
    });
}

开发者ID:highcharts，项目名称:highcharts，代码行数:25，代码来源:annotations.ts

示例2: test_simple

function test_simple() {
    Highcharts.chart('container', {
        plotOptions: {
            series: {
                // general options for all series
            },
            organization: {
                // shared options for all organization series
            }
        },
        series: [{
            // specific options for this series instance
            type: 'organization',
            data: [{
                from: 'Category1',
                to: 'Category2',
                weight: 2
            }, {
                from: 'Category1',
                to: 'Category3',
                weight: 5
            }]
        }]
    });
}

开发者ID:highcharts，项目名称:highcharts，代码行数:25，代码来源:organization.ts

示例3: test_3DColumn

/**
 * Tests Highcharts.seriesTypes.column in a 3D use case.
 *
 * @todo
 * - Make test more complex.
 */
function test_3DColumn() {
    Highcharts.chart('container', {
        title: {
            text: 'Chart rotation demo'
        },
        chart: {
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: [{
            type: 'column',
            data: [29.9, 71.5, 106.4, 129.2, 144.0]
        }]
    });
}

开发者ID:highcharts，项目名称:highcharts，代码行数:31，代码来源:highcharts-3d.ts

示例4: test_seriesAreaRange

/**
 * Tests special use case of Highcharts.seriesTypes.arearange.
 */
function test_seriesAreaRange() {
    Highcharts.chart('container', {
        tooltip: {
            formatter: function() {
                const high = this.point['high'] as number;
                return high.toString();
            }
        },
        series: [{
            type: 'arearange',
            data: []
        }]
    });
}

开发者ID:highcharts，项目名称:highcharts，代码行数:17，代码来源:highcharts.ts

示例5: test_options

function test_options() {
    Highcharts.chart('container', {
        chart: {
            animation: false
        },
        title: {
            text: 'Highcharts draggable points demo'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
                'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            softMin: -200,
            softMax: 400
        },
        plotOptions: {
            series: {
                stickyTracking: false,
                dragDrop: {
                    draggableY: true
                }
            },
            column: {
                stacking: 'normal',
                minPointLength: 2
            },
            line: {
                cursor: 'ns-resize'
            }
        },
        tooltip: {
            valueDecimals: 2
        },
        series: [{
            data: [0, 71.5, -106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
                -95.6, 54.4],
            type: 'column'
        }, {
            data: [0, -71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
                95.6, 54.4].reverse(),
            type: 'column'
        }, {
            data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
                95.6, 54.4],
            type: 'line'
        }]
    });
}

开发者ID:highcharts，项目名称:highcharts，代码行数:49，代码来源:draggable-points.ts

示例6: test_AreaRange

/**
 * Tests Highcharts.seriesTypes.arearange in a complex use case.
 *
 * @todo
 *  - Make it more complex.
 */
function test_AreaRange() {
    Highcharts.chart('container', {
        title: {
            text: 'Temperature variation by day'
        },
        chart: {
            polar: true
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                // general options for all series
            },
            arearange: {
                // shared options for all arearange series
            }
        },
        series: [{
            // specific options for this series instance
            name: 'Temperatures',
            type: 'arearange',
            data: [
                [1483232400000, 1.4, 4.7],
                [1483318800000, -1.3, 1.9],
                [1483405200000, -0.7, 4.3],
                [1483491600000, -5.5, 3.2],
                [1483578000000, -9.9, -6.6]
            ],
            color: '#C00'
        }],
        tooltip: {
            crosshairs: true,
            shared: true,
            valueSuffix: 'Â°C'
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: undefined
            }
        }
    });
}

开发者ID:highcharts，项目名称:highcharts，代码行数:53，代码来源:highcharts-more.ts

示例7: test_seriesColumn

function test_seriesColumn() {
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar',
                'Apr',
                'May',
                'Jun',
                'Jul',
                'Aug',
                'Sep',
                'Oct',
                'Nov',
                'Dec'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            type: 'column',
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        }, {
            type: 'column',
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
        }, {
            type: 'column',
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
        }, {
            type: 'column',
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        }]
    });
}

开发者ID:mclkim，项目名称:highcharts，代码行数:67，代码来源:highcharts.ts

示例8: test_seriesPie

function test_seriesPie() {
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: undefined, // null
            plotBorderWidth: undefined, // null
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: 'Browser market shares in January, 2018'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Brands',
            // colorByPoint: true,
            data: [{
                name: 'Chrome',
                y: 61.41,
                sliced: true,
                selected: true
            }, {
                name: 'Internet Explorer',
                y: 11.84
            }, {
                name: 'Firefox',
                y: 10.85
            }, {
                name: 'Edge',
                y: 4.67
            }, {
                name: 'Safari',
                y: 4.18
            }, {
                name: 'Sogou Explorer',
                y: 1.64
            }, {
                name: 'Opera',
                y: 1.6
            }, {
                name: 'QQ',
                y: 1.2
            }, {
                name: 'Other',
                y: 2.61
            }]
        }]
    });
}

开发者ID:mclkim，项目名称:highcharts，代码行数:64，代码来源:highcharts.ts

示例9: test_seriesBar

function test_seriesBar() {
    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Historic World Population by Region'
        },
        subtitle: {
            text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
        },
        xAxis: {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify' as any
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 80,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            type: 'bar',
            name: 'Year 1800',
            data: [107, 31, 635, 203, 2]
        }, {
            type: 'bar',
            name: 'Year 1900',
            data: [133, 156, 947, 408, 6]
        }, {
            type: 'bar',
            name: 'Year 2000',
            data: [814, 841, 3714, 727, 31]
        }, {
            type: 'bar',
            name: 'Year 2016',
            data: [1216, 1001, 4436, 738, 40]
        }]
    });
}

开发者ID:mclkim，项目名称:highcharts，代码行数:70，代码来源:highcharts.ts

示例10: test_seriesLine

function test_seriesLine() {
    Highcharts.chart('container', {
        title: {
            text: 'Solar Employment Growth by Sector, 2010-2016'
        },
        subtitle: {
            text: 'Source: thesolarfoundation.com'
        },
        yAxis: {
            title: {
                text: 'Number of Employees'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 2010
            }
        },
        series: [{
            type: 'line',
            name: 'Installation',
            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        }, {
            type: 'line',
            name: 'Manufacturing',
            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        }, {
            type: 'line',
            name: 'Sales & Distribution',
            data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        }, {
            type: 'line',
            name: 'Project Development',
            data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        }, {
            type: 'line',
            name: 'Other',
            data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
}

开发者ID:mclkim，项目名称:highcharts，代码行数:63，代码来源:highcharts.ts

注：本文中的highcharts.chart函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。