如何创建面积范围图 [英] How to create area range chart

问题描述

我要创建以下链接

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

I want to add data to ranges using loop on my data. What should be the type of the ranges to create chart?

请提出建议.提前致谢.这是JSFiddle代码:

Please suggest. Thanks in advance. Here's the JSFiddle code:

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
            }
                    ]

        });

});

推荐答案

下面是一个示例，它产生一个Chart图形，就像链接图像中的一个.

Here is an example the produces a Chart graphic just like the one in the linked image.

注意:创建一些测试数据后，我将计算一个具有透明颜色的虚拟序列，该虚拟序列将使整个数据堆叠起来，以便中性"序列的中值恰好位于一条水平线上.

Note: After I have created a few testdata I calculate a dummy series with a transparent color that will make the whole data stack up so that the median of the "neutral" series sits nicely on one horizontal line.

    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循环中:

If you want to show a tooltip similar to the one from your example you can add this to the AddXY loop:

        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;

以下是示例图片:

这篇关于如何创建面积范围图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！