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 chart？谢谢！

Answer 1

我没有真正得到这个问题。但如果问题是“这可能吗？”那你为什么不直接尝试呢。如果你已经尝试过并且没有达到预期的效果，那就回到这里，看一下jsFiddle试用版以及你的预期和实际行为。

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

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

使用多种图表类型和选项渲染到相同的Container

1 个答案: