Question

我正在创建一个列类型图。是否有一种方法在javascript中更改列的颜色（我想定义）IF Gait == Walk

以下是我正在进行的图表示例 https://jsfiddle.net/NRKSensors/4t6q5z0j/3/

＆＃13;

$(function() {
  Highcharts.setOptions({
    colors: ['#ffffff', '#000000', '#666666']
  });

  var chart, merge = Highcharts.merge;
  $(document).ready(function() {



    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'column',
        zoomType: 'x  ',
        marginTop: 20,
        borderColor: null,
        borderRadius: 20,
        borderWidth: 2,
        backgroundColor: null,
      },
      title: {
        text: null
      },

      subtitle: {
        text: null
      },

      data: {
        csv: document.getElementById('csv').innerHTML,
        seriesMapping: [{
          x: 0, // Insert X values in minutes
          y: 1, // Insert Y values (Frequency)
          label: 2 // Insert Labels (Standing,Walk, Trot, Canter, Jump)
        }]
      },

      tooltip: {
        useHTML: true,
        formatter: function() {
          point = this.point;
          html = '<table>';
          html += point.label + '</h3></th></tr>';
          html += '</table>';
          return html;
        },
        followPointer: true,
        hideDelay: 200
      },



      exporting: {
        buttons: {
          contextButton: {
            enabled: false
          }
        }
      }, // Gemmer Export Menu knappen. Den tror jeg ikke vi skal anvende.
      credits: {
        enabled: false
      },

      series: [{
        type: 'column',
        color: 'black'
      }],

    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<div id="container" style="width:100%; height:400px;"></div>

<pre id="csv" style="display:none">Touchdown,Frequency,Gait 
                            22.414,100,"Walk"
                            22.42366667,100,"Walk"
                            22.43333333,103.4482759,Walk
                            22.44266667,96.77419355,Walk
                            22.45266667,96.77419355,Walk                     
                            24.69466667,136.3636364,Trot
                            24.70166667,125,Trot
                            24.70933333,136.3636364,Trot
                            24.71633333,120,Trot
                            24.72433333,130.4347826,Trot
                            25.11933333,68.18181818,Canter
                            25.13366667,88.23529412,Canter
                            25.14466667,85.71428571,Canter
                            25.156,88.23529412,Canter
                          

                        </pre>

＆＃13;

我是否需要使用qoutes准备最后一列中的数据？所以＆＃34; Walk＆＃34;而不是走路？

下面是我在Matlab中做的一个例子。所以我需要使它类似于此，但在highcharts中

Matlab Column example

Answer 1

这样做的一种方法是添加一个名为color的新列，并根据“Gait”的值设置此列的值。这可以在highcharts解析csv数据之后完成，如下所示：

data: {
  csv: document.getElementById('csv').innerHTML, // Delete this line
  seriesMapping: [{
    x: 0, // Insert X values in minutes
    y: 1, // Insert Y values (Frequency)
    label: 2, // Insert Labels (Standing,Walk, Trot, Canter, Jump) NOT in quotes '' !!!
    color: 3 //specify that column 3 is color
  }],
  parsed: function(columns) {
    columns.push(['Color'])                        //Add a new column, color
    for (var i = 0; i < columns[2].length; i++) {
      if (columns[2][i] == 'Walk') {
        columns[3].push('Red');                    //Set color red for walk
      } else if (columns[2][i] == 'Trot') {
        columns[3].push('Blue');
      } else if (columns[2][i] == 'Canter') {
        columns[3].push('green');
      } else {                                     //Set grey for any gaits not found
        columns[3].push('grey');
      }
    }
  }
},

工作示例： https://jsfiddle.net/ewolden/4t6q5z0j/40/

关于data.parsed的API： https://api.highcharts.com/highcharts/data.parsed

Highcharts - 更改列颜色如果data.point等于string

1 个答案: