Question

我想创建以下link

中给出的area range chart

我想在数据上使用循环将数据添加到范围。创建图表的ranges的类型应该是什么？

请建议。提前致谢。这是JSFiddle代码：

HTML：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JS：

$(function () {
var ranges = [[1246406400000,33,22],[1246492800000,24,12],[1246579200000,15,1],[1246665600000,28,17],[1246752000000,22,12],[1246838400000,34,22],[1246924800000,30,19],[1247011200000,27,15],[1247097600000,35,24],[1247184000000,29,14],[1247270400000,32,20],[1247356800000,32,21],[1247443200000,34,23],[1247529600000,19,9],[1247616000000,31,21],[1247702400000,22,7],[1247788800000,25,11],[1247875200000,19,6],[1247961600000,33,18],[1248048000000,33,18],[1248134400000,21,7],[1248220800000,31,19],[1248307200000,25,15],[1248393600000,29,19],[1248480000000,34,23],[1248566400000,21,9],[1248652800000,27,12],[1248739200000,19,4],[1248825600000,32,19],[1248912000000,32,20],[1248998400000,16,1]], ranges2 = [[1246406400000,22,-22],[1246492800000,12,-12],[1246579200000,1,-1],[1246665600000,17,-17],[1246752000000,12,-12],[1246838400000,22,-22],[1246924800000,19,-19],[1247011200000,15,-15],[1247097600000,24,-24],[1247184000000,14,-14],[1247270400000,20,-20],[1247356800000,21,-21],[1247443200000,23,-23],[1247529600000,9,-9],[1247616000000,21,-21],[1247702400000,7,-7],[1247788800000,11,-11],[1247875200000,6,-6],[1247961600000,18,-18],[1248048000000,18,-18],[1248134400000,7,-7],[1248220800000,19,-19],[1248307200000,15,-15],[1248393600000,19,-19],[1248480000000,23,-23],[1248566400000,9,-9],[1248652800000,12,-12],[1248739200000,4,-4],[1248825600000,19,-19],[1248912000000,20,-20],[1248998400000,1,-1]], ranges3 = [[1246406400000,-22,-45],[1246492800000,-12,-30],[1246579200000,-1,-17],[1246665600000,-17,-43],[1246752000000,-12,-40],[1246838400000,-22,-45],[1246924800000,-19,-43],[1247011200000,-15,-45],[1247097600000,-24,-50],[1247184000000,-14,-37],[1247270400000,-20,-44],[1247356800000,-21,-42],[1247443200000,-23,-42],[1247529600000,-9,-37],[1247616000000,-21,-40],[1247702400000,-7,-24],[1247788800000,-11,-27],[1247875200000,-6,-27],[1247961600000,-18,-34],[1248048000000,-18,-46],[1248134400000,-7,-36],[1248220800000,-19,-48],[1248307200000,-15,-30],[1248393600000,-19,-49],[1248480000000,-23,-50],[1248566400000,-9,-38],[1248652800000,-12,-27],[1248739200000,-4,-26],[1248825600000,-19,-45],[1248912000000,-20,-40],[1248998400000,-1,-17]];


        $('#container').highcharts({

            title: {
                text: 'Sentiment Flood Map'
            },

            xAxis: {
                type: 'datetime'
            },

            yAxis: {
                title: {
                    text: null
                }
            },

            tooltip: {
                crosshairs: true,
                shared: true,
                valueSuffix: ''
            },

            legend: {
            },

            series: [ {
                name: 'Positive',
                data: ranges,
                type: 'arearange',
                lineWidth: 0,
                linkedTo: ':previous',
                color: Highcharts.getOptions().colors[2],
                fillOpacity: 0.8,
                zIndex: 0
            }
                     , {
                name: 'Neutral',
                data: ranges2,
                type: 'arearange',
                lineWidth: 0,
                linkedTo: ':previous',
                color: Highcharts.getOptions().colors[1],
                fillOpacity: 0.8,
                zIndex: 0
            }
                     , {
                name: 'Negative',
                data: ranges3,
                type: 'arearange',
                lineWidth: 0,
                linkedTo: ':previous',
                color: Highcharts.getOptions().colors[3],
                fillOpacity: 0.8,
                zIndex: 0
            }
                    ]

        });

});

Answer 1

以下是生成图表图形的示例，就像链接图像中的图表一样。

注意：在我创建了一些测试数据后，我计算了一个透明颜色的虚拟系列，它将使整个数据堆叠起来，使“中性”系列的中位数恰好位于一条水平线上。

    int numPoints = 30;     // create some test data
    List<int> neutralData = new List<int>();
    List<int> negativeData = new List<int>();
    List<int> positiveData = new List<int>();
    List<int> dummyData = new List<int>();
    for (int i = 0; i < numPoints; i++)
    {
        // the real data series, using a Random R:
        positiveData.Add(R.Next(i + 22));
        neutralData .Add(R.Next(i + 33));
        negativeData.Add(R.Next(i + 44));
        // calculate the transparent bottom series:
        dummyData.Add( - neutralData[i] / 2 - negativeData[i]);
    }
    // set up the Chart:
    chart1.ChartAreas.Add("StackedArea");  // if necessary
    Series s0 = chart1.Series.Add(" ");
    Series s1 = chart1.Series.Add("negative");
    Series s2 = chart1.Series.Add("neutral");
    Series s3 = chart1.Series.Add("positive");
    foreach (Series s in chart1.Series) s.ChartType = SeriesChartType.StackedArea;
    s0.Color = Color.Transparent;
    s1.Color = Color.FromArgb(200, Color.Red);
    s2.Color = Color.FromArgb(200, Color.LightSlateGray);
    s3.Color = Color.FromArgb(200, Color.Green)

    // now add the data points:
    for (int i = 0; i < numPoints; i++)
    {
        s0.Points.AddXY(i, dummyData[i]);
        s1.Points.AddXY(i, negativeData[i] );
        s2.Points.AddXY(i, neutralData [i]);
        s3.Points.AddXY(i, positiveData[i]);
    }

如果要显示与示例中的工具提示类似的工具提示，可以将其添加到AddXY循环中：

        int a2 = dummyData[i] +  negativeData[i];
        int a3 = a2 + neutralData[i];
        int a4 = a3 + positiveData[i];
        string tt = string.Format( "Data Point {0}\r\nPositive: {1} - {2}\r\n"
            + "Neutral: {2} - {3}\r\nNegative: {3} - {4}", i, a4, a3, a2, dummyData[i]);
        s1.Points[i].ToolTip = tt;
        s2.Points[i].ToolTip = tt;
        s3.Points[i].ToolTip = tt;

这是一个示例图片： StackedArea Chart with Tooltip

Answer 2

您无法创建与链接中显示的图表完全相同的图表，但您可以在图表上使用不同的系列。我发布了创建图表并使用2个系列填充图表的代码，您可以根据需要添加任意数量的系列。

DataSet dataSet;
ConnectionClass.GetInstance().connection_string = Properties.Settings.Default.MindMuscleConnectionString;
ConnectionClass.GetInstance().Sql = "Select Count(MemberInfo.memberName) as 'Members', CompetitionName as 'Competition' FROM MemberInfo, MemberBodyInfo, Competition WHERE MemberInfo.memberID = MemberBodyInfo.memberID AND MemberBodyInfo.weight >= Competition.CompetitionCategory and MemberBodyInfo.weight <= Competition.CompetitionCategory + 5 group by CompetitionName;";
dataSet = ConnectionClass.GetInstance().GetConnection;
chart1.Series["Series1"].Name = "Members";
chart1.Series["Members"].YValueMembers = "Members";
chart1.Series["Members"].XValueMember = "Competition";
chart1.Series.Add("Members2");
chart1.Series["Members2"].ChartType = SeriesChartType.StackedArea;

chart1.Series["Members2"].IsValueShownAsLabel = true;
chart1.Series["Members2"].YValueMembers = "Members";
chart1.Series["Members2"].XValueMember = "Competition";
this.chart1.Titles.Add("Competition Participants");   // Set the chart title
chart1.Series["Members"].ChartType = SeriesChartType.StackedArea;
chart1.Series["Members"].IsValueShownAsLabel = true;  // To show chart value 
chart1.DataSource = dataSet;
chart1.DataBind();

我实际上并没有从一些不同的数据中创建一个新系列......这两个系列在这里都是相同的，但我刚给你看了一个例子。

如何创建区域范围图表

2 个答案: