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});
    });

});

在模态中设置highcharts标题

1 个答案: