Question

我正在寻找一种方法来抵消我在Google Chart上制作的注释标签。我在下面添加了一张图片，但基本上我所做的是创建了一个柱形图，其中隐藏的线条是注释的设置。

我这样做是因为条形显然不支持注释。我的最终目标是让每周的百分比显示在栏的顶部。问题是，由于我必须这样做的方式，百分比注释集中在x轴标签而不是列栏本身。

从上面的图像链接可以看出，当每个位置的值相似时，这会导致重叠问题。我正在寻找重叠的解决方案。

以下是我用于表示图表的代码（用于google api javascript的C＃string appender）：

$(…)

该图表由一个名为dt的动态表填充。这是该表的布局：

Datatable Example

图表绘制代码（Javascript）：

str.Append(@"<script type=*text/javascript*> google.load( *visualization*, *1*, {packages:[*corechart*, *bars*]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
    var data = new google.visualization.DataTable();            
    data.addColumn({type: 'string', label: 'Date'});
    data.addColumn({type: 'number', label: 'NC'});
    data.addColumn({type: 'number', label: 'WA'});
    data.addColumn({type: 'number', label: 'Std Cap'});
    data.addColumn({type: 'number', label: 'NC'});
    data.addColumn({type: 'string', role: 'annotation', label: 'NCa' });
    data.addColumn({type: 'number', label: 'WA'});
    data.addColumn({type: 'string', role: 'annotation', label: 'WAa' });
    data.addRows(" + dt.Rows.Count + ");");

for (int i = 0; i <= dt.Rows.Count - 1; i++)
{
    // Data values.
    str.Append("data.setValue(" + i + "," + 0 + "," + "'" + dt.Rows[i]["WeekNum"].ToString() + "');");
    str.Append("data.setValue(" + i + "," + 1 + "," + "'" + dt.Rows[i]["NC"].ToString() + "');");
    str.Append("data.setValue(" + i + "," + 2 + "," + "'" + dt.Rows[i]["WA"].ToString() + "');");
    str.Append("data.setValue(" + i + "," + 3 + "," + "'" + dt.Rows[i]["Std Cap"].ToString() + "');");
    // Invisible line to set annotations off of.
    str.Append("data.setValue(" + i + "," + 4 + "," + "'" + double.Parse(dt.Rows[i]["NC"].ToString()) + "');");
    // Annotation value; Multiply value by 100 to get percentage.
    str.Append("data.setValue(" + i + "," + 5 + "," + "'" + String.Format("{0}%", (100 * double.Parse(dt.Rows[i]["NC"].ToString()))) + "');");
    // Invisible line to set annotations off of.
    str.Append("data.setValue(" + i + "," + 6 + "," + "'" + double.Parse(dt.Rows[i]["WA"].ToString()) + "');");
    // Annotation value; Multiply value by 100 to get percentage.
    str.Append("data.setValue(" + i + "," + 7 + "," + "'" + String.Format("{0}%", (100 * double.Parse(dt.Rows[i]["WA"].ToString()))) + "');");
}

str.Append(" var formatter = new google.visualization.NumberFormat({ pattern:'#.#%' });");
str.Append(" formatter.format(data, 1);");
str.Append(" formatter.format(data, 2);");
str.Append(" var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));");
str.Append(" chart.draw(data, {width: 1000, height: 600, title: '',");
str.Append(" stackSeries: true, isStacked: false, legend: {alignment: 'end'},");
str.Append(@" vAxes:{
    0: { 'maxValue': " + maxVal + @", format: '#%'},
    1: { 'maxValue': " + maxVal + @"},
    2: { 'maxValue': " + maxVal + @"}
    },");
str.Append(@" hAxis: {title: ''},
    seriesType: 'bars',
    series: {
        0: {type: 'bars', color: 'blue'}, 
        1: {type: 'bars', color: 'green'},
        2: {type: 'line', color: 'red', lineDashStyle: [4, 4]},
        3: {type: 'line', lineWidth: 0, visibleInLegend:false, pointSize: 0},
        4: {type: 'line', lineWidth: 0, visibleInLegend:false, pointSize: 0}                             
        },");
str.Append(@" annotations: {
    style: 'point',
    stemColor: 'none',
    textStyle: { color: 'black' },
                 alwaysOutside: 'true'                        
           }");
str.Append("}); }");
str.Append("<" + "/script>");

Literal lit = this.Master.FindControl("body").FindControl("lt1") as Literal;

lit.Text = str.ToString().Replace('*', '"');

Chart Div on page（HTML / ASP.NET）：

var options = { packages: ['corechart'], callback : drawChart};
google.load('visualization', '1', options);

function drawChart() { }

我并不喜欢偏移的想法，这正是我从所有研究中获得的。最后我只是想在每一列的顶部显示百分比，所以如果有更好的方法可以解决这个问题，我全都听见了！

提前谢谢。

:: EDIT ::

在考虑了WhiteHat的评论之后。我对我的for循环进行了以下调整，当值在彼此的10个点内时，它会（垂直）偏移它们。这不是最优雅的解决方案，但似乎确实有效。

<div>                                        
    <asp:Literal ID="lt1" runat="server"></asp:Literal>
    <div id="chart_div1" style="width:1000px; height:600px"></div>
</div>

但是，如果有人知道如何将它们集中在列上，那将是理想的。

谷歌图表;从水平轴偏移注释

0 个答案: