javascript - 在模态中设置 highcharts 标题

Question

如何从元素设置 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/

我在这里做错了什么

Answer 1

在模态代码中，您需要使用parent()而不是子元素来访问textControl。

在决定 highCharts 时，您必须将其与第二个图表进行映射，因为您已经定义了该图表，并且由于没有 #container，因此您需要将其放在标记中的一个图表中

这是一个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});
    });

});