【问题标题】:AmCharts not displayed when adding website to local IIS将网站添加到本地 IIS 时不显示 AmCharts
【发布时间】:2017-06-09 11:01:32
【问题描述】:

我使用 Visual Studio 创建了包含 amcharts 的 asp.net webform 项目。当我运行项目时,一切正常。但是当我在本地 IIS 上发布它时(当前版本是 7 - windows 7 64 位),它不会显示。我用谷歌搜索了一下,但还没有找到解决方案。 (其中之一是设置 IIS 以正确处理 SVG 文件,但它也没有帮助。)有人遇到过这个问题吗?

【问题讨论】:

  • 只是为了澄清一下:您是否将图表导出为 SVG 文件,然后将它们加载到页面中?如果是这种情况,您需要添加 IIS 的扩展来支持它。在这里查看更多信息:msdn.microsoft.com/en-us/library/bb515343.aspx
  • 我在
    标签内创建图表。
  • 什么是 DivElement 尺寸?尝试将其设置为
  • 你见过它在 IE 以外的任何浏览器上工作吗?能发一下代码吗?

标签: asp.net iis amcharts


【解决方案1】:

我使用 Chrome。当我运行项目时,它可以工作。但部署到 IIS 后不起作用。

这是我减少了额外部分的代码。

从 SQL 获取数据并创建 JS 函数字符串的 Visual basic.Net 代码

    Protected Sub btn1_Click(sender As Object, e As EventArgs) Handles btn1.Click
    comm.CommandText = "Select DateMeasr, data1, data2 from dbo.Measurements where DateMeasr>'2017-06-13 12:04:30' and DateMeasr<'2017-06-13 17:00:00' Order by DateMeasr"
    If conn.State <> ConnectionState.Open Then conn.Open()
    da.Fill(dtC)
    If dtC.Rows.Count > 0 Then
        DataCollect()
    End If
End Sub

Protected Sub DataCollect()
    Dim sb As New StringBuilder
    Dim strtime As DateTime
    sb.Append("<script type=""text/javascript"">")
    sb.Append("function generateChartData() {")
    For i = 0 To dtC.Rows.Count - 1
        strtime = CDate(dtC.Rows(i).Item(0))
        sb.Append("var newDate = new Date(" + strtime.Year.ToString + ", " + (strtime.Month - 1).ToString + ", " + strtime.Day.ToString + ", " + strtime.Hour.ToString + ", " + strtime.Minute.ToString + ", " + strtime.Second.ToString + ");")
        sb.Append("var data1 = " + dtC.Rows(i).Item(1).ToString + ";")
        sb.Append("var data2 = " + dtC.Rows(i).Item(2).ToString + ";")
        sb.Append("chartData1.push({")
        sb.Append("date: newDate,")
        sb.Append("data1: data1,")
        sb.Append("data2: data2")
        sb.Append("});")
    Next
    sb.Append("}")
    sb.Append("</script>")
    ScriptManager.RegisterStartupScript(btn1, btn1.GetType, "teststring", sb.ToString, False)
End Sub

创建Amchart的Javascript函数

<script type="text/javascript">
       var chart1;
       var chartData1 = [];

       AmCharts.ready(function () {
  
           chart1 = new AmCharts.AmSerialChart();
           chart1.dataProvider = chartData1;
           chart1.dataDateFormat = "YYYY-MM-DD, JJ:NN:SS";
           chart1.categoryField = "date";
           chart1.rotate = true;
           chart1.autoMargins = false;
           chart1.marginLeft = 85;
           chart1.marginTop = 200;
           chart1.pathToImages = "https://www.amcharts.com/lib/3/images/";
 
           chart1.synchronizeGrid = true; // this makes all axes grid to be at the same intervals

           // AXES
           // category
           var categoryAxis1 = chart1.categoryAxis;
           categoryAxis1.parseDates = true; // as our data is date-based, we set parseDates to true
           categoryAxis1.minPeriod = "ss";
           categoryAxis1.minorGridEnabled = true;
           categoryAxis1.axisColor = "#DADADA";
           categoryAxis1.twoLineMode = true;
           categoryAxis1.dateFormats = [{
               period: 'fff',
               format: 'JJ:NN:SS'
           }, {
               period: 'ss',
               format: 'JJ:NN:SS'
           }, {
               period: 'mm',
               format: 'JJ:NN'
           }, {
               period: 'hh',
               format: 'JJ:NN'
           }, {
               period: 'DD',
               format: 'DD'
           }, {
               period: 'WW',
               format: 'DD'
           }, {
               period: 'MM',
               format: 'MMMM'
           }, {
               period: 'YYYY',
               format: 'YYYY'
           }];

           // first value axis (on the left)
           var valueAxis1 = new AmCharts.ValueAxis();
           valueAxis1.offset = 175;
           valueAxis1.position = "right";
           valueAxis1.axisColor = "#04a016";
           valueAxis1.axisThickness = 2;
           chart1.addValueAxis(valueAxis1);

           var valueAxis2 = new AmCharts.ValueAxis();
           valueAxis2.offset = 125;
           valueAxis2.position = "right";
           valueAxis2.axisColor = "#ea0e19";
           valueAxis2.axisThickness = 2;
           chart1.addValueAxis(valueAxis2);

           // GRAPHS
           // first graph
           var graph1 = new AmCharts.AmGraph();
           graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
           graph1.lineColor = valueAxis1.axisColor;
           graph1.title = "data1graph";
           graph1.valueField = "data1";
           graph1.hideBulletsCount = 30;
           graph1.bulletBorderThickness = 1;
           graph1.lineThickness = 2;
           chart1.addGraph(graph1);

           var graph2 = new AmCharts.AmGraph();
           graph2.valueAxis = valueAxis2; // we have to indicate which value axis should be used
           graph2.lineColor = valueAxis2.axisColor;
           graph2.title = "data2graph";
           graph2.valueField = "data2";
           graph2.hideBulletsCount = 30;
           graph2.bulletBorderThickness = 1;
           graph2.lineThickness = 2;
           chart1.addGraph(graph2);

           // CURSOR
           var chartCursor1 = new AmCharts.ChartCursor();
           chartCursor1.cursorAlpha = 0.1;
           chartCursor1.fullWidth = true;
           chartCursor1.valueLineBalloonEnabled = true;
           chart1.addChartCursor(chartCursor1);

           // SCROLLBAR
           var chartScrollbar1 = new AmCharts.ChartScrollbar();
           chart1.addChartScrollbar(chartScrollbar1);

           // LEGEND
           var legend1 = new AmCharts.AmLegend();
           legend1.markerLabelGap = 3;
           legend1.spacing = 1;
           legend1.position = "absolute";
           legend1.position = "top";
           chart1.addLegend(legend1);

       });

       function clicktodrawchart() 
		{
           generateChartData();
           chart1.write("chartdiv1");
        }
</script>

用于显示图表的按钮和 div 的 Asp.net 标记

<div>
  <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
                <HeaderTemplate>
                    Charts<br />
                </HeaderTemplate>
                <ContentTemplate>
                <br />
                <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btn1" EventName="Click" />
    </Triggers>
    <ContentTemplate>
        <asp:Button runat="server" ID="btn1" Text="Get data from DB" />
    </ContentTemplate>
    </asp:UpdatePanel>
    <br />
    <input id="btnforchart" value="Click to draw charts" type="button" style="color: black; font-size:15px; padding:4px;" onclick="clicktodrawchart()" />
    <div id="chartdiv1" style="width: 400px; height: 1000px; position: absolute; top: 260px; left: 40px; border: 2px solid #9ccfed;"></div>
                        </ContentTemplate>
            </ajaxToolkit:TabPanel>
     </ajaxToolkit:TabContainer>
    </div>

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签