javascript - 如何在 cshtml 页面中将选项传递给 JavaScript

Question

我想从我的代码中设置谷歌图表中的颜色，但不知道该怎么做。我在 cshtml 页面中有这个。

<script type="text/javascript">

    // Load the Visualization API and the piechart package.
    //google.load('visualization', '1.0', { 'packages': ['bar'] });
    google.load('visualization', '1.0', { 'packages': ['corechart'] });
    var visualization;
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawCharts);

    function drawCharts() {

                var titleName = "Rounding Eligible";


                $("#chartHeader").html(titleName);
                var options = {
                    'backgroundColor': 'transparent',
                    title: titleName,
                    subtitle: 'Range of ddd to ddd', seriesType: "bars",isStacked: true,
                    series:  {  0:{color:"#009add"} ,1:{color:"#009844"} ,2: {color:"#ef7521"} ,3: {color:"#89d2e6"},4:{color:"#82bc00"},5:{color:"#f19f53"},6:{color:"#0055b7"},@(Model.NumSeries) : { type: "line", visibleInLegend: false, color: "#FF0000"  }},
                    vAxis:{title: "Count", minValue:10}

                };
                // Create the data table.
                var data = google.visualization.arrayToDataTable(@Html.Raw(Model.ChartJson));
                var chart_div = document.getElementById('chartDiv');
                var chart = new google.visualization.ComboChart(chart_div);

                chart.draw(data, options);

                //setup a temp image to gold hold the chart
                createHiddenImage('hiddenCanvas1', 'chartDiv', chart.getImageURI());
            }
    </script>

我想做的是根据代码中的某些内容替换我的颜色( 0:{color:"#009add"} ,1:{color:"#009844"})，并执行类似的操作

 isStacked: true,
series: 
 @foreach seriesvalue in @Model.seriesValues
{@Html.Raw(seriesvalue);},  
Axis:{title: "Count", minValue:10}

我不知道如何才能完成此任务，最好只从模型中传递整个选项对象吗？基本上我不知道该怎么做。

Answer 1

只需使用 JSON 序列化:

series: @Html.Raw(JsonConvert.SerializeObject(Model.seriesValues))

您需要将 seriesValues 设为一个 Dictionary，并以您想要与每种颜色关联的数字作为键控。

要更深入地了解，请参阅此答案:Using Razor within JavaScript