Google 图表选项和 Javascript 语法

Question

我有一个使用 google charts api 成功绘制折线图的 javascript 函数。

google.load('visualization', '1.1', { packages: ['corechart'] });
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Day In Theater');
    data.addColumn('number', 'Movie 1');
    data.addColumn('number', 'Movie 2');
    data.addColumn('number', 'Movie 3');

    data.addRows([
        [1,   37.8, 80.8, 41.8],
        [2,   30.9, 69.5, 32.4],
        [3,   25.4, 57, 25.7],
        [4,   11.7, 18.8, 10.5],
        [5,   11.9, 17.6, 10.4],
        [6,   8.8, 13.6, 7.7],
        [7,   7.6, 12.3, 9.6],
        [8,   12.3, 29.2, 10.6],
        [9,   16.9, 42.9, 14.8],
        [10,   12.8, 30.9, 11.6],
        [11,   5.3, 7.9, 4.7],
        [12,   6.6, 8.4, 5.2],
        [13,   4.8, 6.3, 3.6],
        [14,   4.2, 6.2, 3.4]
    ]);

    // var Series_To_Highlight=1;

    var options = {
        chart: {
            title: 'Box Office Earnings in First Two Weeks of Opening',
            subtitle: 'in millions of dollars (USD)'
        },
        series: {
            1: { lineWidth: 5 },
        },
        width: 900,
        height: 500
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart'));

    chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id='chart' style='width:800px;height:400px;'></div>

我想强调其中一个系列。 当我对要突出显示的系列进行硬编码时，一切顺利。

var options = {
    chart: {
        title: 'Box Office Earnings in First Two Weeks of Opening',
        subtitle: 'in millions of dollars (USD)'
    },
    series: {
        1: { lineWidth: 5 },
    },
    width: 900,
    height: 500
};

然而，当我要突出显示的系列是一个变量时，它不起作用...

    var Series_To_Highlight=1;

    var options = {
        chart: {
            title: 'Box Office Earnings in First Two Weeks of Opening',
            subtitle: 'in millions of dollars (USD)'
        },
        series: {
            Series_To_Highlight: { lineWidth: 5 },
        },
        width: 900,
        height: 500
    };

有什么建议吗？ 谢谢

Answer 1

您需要用方括号将变量括起来以插入

1

的底层文字值。

const Series_To_Highlight = 1;

const options = {
  series: {
    [Series_To_Highlight]: { lineWidth: 5 }
  }
};

参见：MDN - 对象初始值设定项 - 计算属性名称

对象初始化语法也支持计算属性名。这允许您将表达式放在括号

[]

中，它将被计算并用作属性名称。这让人想起 property accessor 语法的括号表示法，您可能已经使用它来读取和设置属性。