在模态中设置highcharts的标题

setting highcharts title in a modal

本文关键字：标题 highcharts 设置模态更新时间：2023-09-26

如何从元素设置highcharts的标题?

下面是我的代码:

$(function () {
var chart;
$('#second-chart').highcharts({
    chart: {
        type: 'bar'
    },
    subtitle: {
        text: 'Assortment # by SKUs'
    },
    xAxis: {
        categories: ['Lazada', 'C1', 'C2', 'C3']
    },
    yAxis: {
        title: {
            text: '# of SKUs'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: ''
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'SKU',
        data: [500, 120, 150, 300]
    }]
});
chart = $('#container').highcharts();
$('#chart-modal').on('shown.bs.modal', function () {
    var title_string = $(this).closest('.row').find('.form-control').val().toString();
    chart.setTitle({ text: title_string});
    // alert(title_string);
});
});

这里是jsfiddle: http://jsfiddle.net/omp4b291/

我哪里做错了

在你的模态代码中，你需要使用parent()而不是children来访问textControl。

当决定highCharts时，你必须将它与第二个图表进行映射因为你已经定义了第二个图表因为没有#container你需要在标记

中有一个

Here is a Working Fiddle

代码片段

$(function () {
    var chart;
    $('#second-chart').highcharts({
        chart: {
            type: 'bar'
        },
        subtitle: {
            text: 'Assortment # by SKUs'
        },
        xAxis: {
            categories: ['Lazada', 'C1', 'C2', 'C3']
        },
        yAxis: {
            title: {
                text: '# of SKUs'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'SKU',
            data: [500, 120, 150, 300]
        }]
    });
    $('#chart-modal').on('shown.bs.modal', function () {
         var chart = $('#second-chart').highcharts();
        var title_string = $(this).parent().find('.form-control').val().toString();
        console.log(chart);
        chart.setTitle({ text: title_string});
    });
});