javascript - 呈现到具有多种图表类型和选项的同一个容器

Question

根据所选的图表类型(线/柱/散点图等)，是否可以在一个渲染中进行多个选项设置？例如我有两种图表类型:

var options = {
    chart: {
        renderTo: 'container',
        type: 'column',
    },
    title: {
        text: title
    },
    subtitle: {
        text: subtitle
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Percentage'
        }
    },
    legend: {
        layout: 'vertical',
        backgroundColor: '#FFFFFF',
        align: 'left',
        verticalAlign: 'top',
        x: 100,
        y: 70,
        floating: true,
        shadow: true
    },
    tooltip: {
        formatter: function () {
            return Math.round(this.y * 100) + '%';
        }
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: []
};

和:

var options = {
    chart: {
        renderTo: 'container',
        type: 'line'
    },
    title: {
        text: title
    },
    subtitle: {
        text: subtitle
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Count'
        }
    },
    tooltip: {
        formatter: function () {
            var s = '';

            $.each(this.points, function (i, point) {
                s += point.series.name + ': ' + point.y + '<br/>';
            });
            return s;
        },
        shared: true
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -10,
    y: 100,
    borderWidth: 0
},
series: []
};

是否可以将它们组合在一起作为一个 $(document).on("click", ".render-Chart", function () {...} 或 var 图表？谢谢!

Answer 1

我真的没听懂这个问题。但如果问题是，“这可能吗？”那你为什么不直接尝试做呢。如果您尝试过但结果不如预期，请返回此处进行 jsFiddle 试用以及您的预期行为与实际行为。

如果您要问的是，如果您有两个图表选项，一个用于线，另一个用于列，两者都指向同一个容器，并且根据某些点击或条件，您要么想要绘制一条线，要么绘制一条列, 但不是两者都是 那么很有可能。如果您担心在导致冲突的两个选项中都提到了相同的容器 ID，请注意选项本身只是存储数据/信息的变量，不会修改 DOM 或自行执行，它只是Highchart 的构造函数将这些作为参数并绘制图表，因此只要构造函数仅被调用一次，您应该安全地使用同一容器 n 次，否则最新构造函数的图表将被绘制到该容器。

var lineOptions = {
    chart: {
        type: 'line',
        renderTo: 'container',
        //...
    }
    //...
};

var columnOptions = {
    chart: {
        type: 'column',
        renderTo: 'container',
        //...
    }
    //...
};
//...
var chart;
function onClick(){
    if(...){
        chart = new Highcharts.StockChart(lineOptions);
    }else if(...){
        chart = new Highcharts.StockChart(columnOptions);
    }       
}