0

申し訳ありませんが、ここに問題のより良い説明があります。まず、asp.net/vb.net を使用しています。カテゴリごとに 2 つのシリーズを持つ Highcharts で動作するグラフを取得しようとしています。列の値を確認していますが、そこにある値に基づいて列の色を設定したいと考えています。

ASPX

<script type="text/javascript">
  $(document).ready(function () {
    $(function () {
       $('#summary_chart').highcharts({
          chart: {
             type: 'column'
             },
          title: {
               text: ' ',
               align: 'left'
             },
          xAxis: {
               categories: [<%= UserString %>]
            },
          yAxis: {
               min: 0,
               max: 9,
               title: {
                    text: 'Grade'
               }
            },
        tooltip: {
               headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
               pointFormat:  '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}</b></td></tr>',
               footerFormat: '</table>',
               shared: true,
               useHTML: true
            },
         colors: [<%= ColorString %>],
    plotOptions: {
               column: {
                  pointPadding: 0.2,
                  borderWidth: 0,
                  colorByPoint: true
                 }
            },
         series: [{
                 name: 'Grade1',
                 data: [<%= Grade1String %>]
            }, {
                 name: 'Grade2',
                 data: [<%= Grade2String %>]
            }]
        });
    });
});

コードビハインド

        ' Building User String
        For Each oRow In oTable
            UserString += "'" & oRow.UserID & "',"
        Next

        ' Building Grade1 Values
        For Each oRow In oTable
            If oRow.SkillDisplay = "Grade1" Then
                Grade1String += "" & oRow.Grade & ","

                ' Determine colors to assign values
                Select Case oRow.Grade
                    Case 1
                        ColorString += "'#FFC0CB',"
                    Case 2
                        ColorString += "'#000',"
                    Case 3
                        ColorString += "'#000',"
                    Case 4
                        ColorString += "'#FFA500',"
                    Case 5
                        ColorString += "'#FFA500',"
                    Case 6
                        ColorString += "'#008000',"
                    Case 7
                        ColorString += "'#659CEF',"
                    Case 8
                        ColorString += "'#0000FF',"
                    Case 9
                        ColorString += "'#0000FF',"
                    Case Else
                        ColorString += "'#fff',"
                End Select

            ElseIf oRow.SkillDisplay = "Grade2" Then
                Grade2String += "" & oRow.Grade & ","

                ' Determine colors to assign values
                Select Case oRow.Grade
                    Case 1
                        ColorString += "'#FFC0CB',"
                    Case 2
                        ColorString += "'#000',"
                    Case 3
                        ColorString += "'#000',"
                    Case 4
                        ColorString += "'#FFA500',"
                    Case 5
                        ColorString += "'#FFA500',"
                    Case 6
                        ColorString += "'#008000',"
                    Case 7
                        ColorString += "'#659CEF',"
                    Case 8
                        ColorString += "'#0000FF',"
                    Case 9
                        ColorString += "'#0000FF',"
                    Case Else
                        ColorString += "'#fff',"
                End Select

            End If
        Next

        'Remove last comma in string
        UserString = UserString.Remove(UserString.Length - 1)
        Grade1String = Grade1String.Remove(Grade1String.Length - 1)
        Grade2tring = Grade2String.Remove(Grade2String.Length - 1)
        ColorString = ColorString.Remove(ColorString.Length - 1)
4

2 に答える 2

1

データの数値だけでなく、独自のデータ配列をオブジェクトとして作成できることがわかりました。以下は、ハイチャートの「系列」部分のサンプル セクションで、各データ ポイントは異なる色で表示されています [これを使用できることを願っています]

series: [{
    name: 'Population',
    data: [{
        color: '#FF9999',
        y: 34.4
    },{
        color: '#339900',
        y: 21.8
    },{
        color: '#6600FF',
        y: 20.1
    }],
},
{
    name: 'Population',
    data: [{
        color: '#FF0033',
        y: 34.4
    },{
        color: '#99CC66',
        y: 21.8
    },{
        color: '#3366CC',
        y: 20.1
}]

おそらく「x」値を直接指定できますが、私が試したところ、Highcharts は各値をカテゴリ リストと照合するのに十分スマートでした。

于 2013-07-23T20:45:57.667 に答える
0

http://jsfiddle.net/5a7PS/ Please see this JSFiddle and look at the series data. I have assigned color property to each series and hence its changing the Column Color.

series: [{
            name: 'Tokyo',
            color: '#0000FF',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }, {
            name: 'New York',
            color:'#659CEF',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

        }, {
            name: 'London',
            color:'#FFC0CB',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

        }, {
            name: 'Berlin',
            color:'#FFA500',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]

Hope this is what you want.

I also tried to modify your code. You can see it here http://jsfiddle.net/DwW3m/100/ ( I removed colorByPoint: true ) and it worked!

于 2013-07-23T19:18:15.373 に答える