Question

我想从我的代码中设置Google图表中的颜色，但不确定如何操作。我在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

Answer 2

您可以通过以下方式在页面的任何位置访问模型中的属性，包括脚本中的属性：

@Model.MyPropertyName

考虑到这一点，你的javascript看起来像这样：

myColor = '@Model.MyGreenColorProperty';

请注意@Model周围的单引号...这非常重要，如果该值未被引号包围，则无效。

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

2 个答案: