1

根据所选图表类型（线/列/散点等），是否可以在一个渲染中具有多个选项设置？例如，我有两种图表类型：

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

4

1 回答 1

2

我真的没有得到这个问题。但如果问题是，“有可能吗？” 那你为什么不直接尝试做呢。如果您尝试过但结果不如预期，请返回此处进行 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);
    }       
}
于 2012-09-09T06:29:12.660 回答