highcharts图表 line_basic封装

最新推荐文章于 2025-08-10 14:45:17 发布

原创最新推荐文章于 2025-08-10 14:45:17 发布 · 1.0k 阅读

0 ·

CC 4.0 BY-SA版权

数据可视化同时被 2 个专栏收录

6 篇文章

订阅专栏

Highcharts图表

5 篇文章

订阅专栏

本文展示了一个使用Highcharts库创建的基本线形图表示例。该图表显示了名为“东京”的系列数据，横轴为时间周期（从一周到八周），纵轴为百分比数据。此外，还提供了自定义提示框格式和图例设置。

$(function () {
    var renderTo = "container_1";
    var series = [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5]}];
    var categories = ['一周', '二周', '三周', '四周', '五周', '六周', '七周', '八周'];
    var _line_basic = new chart_line_basic(renderTo, series, categories, false);
    _line_basic.formatterTooltip = function () { return this.x + ': ' + this.y + '%'; }
    _line_basic.showChart();

});

line_basic.js
HC_line_basic.jsHC_line_basic.jsHC_line_basic.js

function chart_line_basic(renderTo, series, categories, legendEnabled) {
    this.renderTo = renderTo;
    this.series = series;
    this.categories = categories;
    this.legendEnabled = legendEnabled;
}
chart_line_basic.prototype.formatterTooltip = function () { }
chart_line_basic.prototype.showChart = function () {
    var chart;
    chart = new Highcharts.Chart({
        chart: {
            renderTo: this.renderTo,
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: ' ',
            x: -20 //center
        },
        subtitle: {
            text: ' ',
            x: -20
        },
        xAxis: {
            categories: this.categories
        },
        yAxis: {
            title: {
                text: ' '
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: this.formatterTooltip
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0,
            enabled: this.legendEnabled
        },
        series: this.series
    });
};

application.js