jquery - Highchart donut 派 - 是否有最大切片数-6ren

jquery - Highchart donut 派 - 是否有最大切片数

转载作者：行者123 更新时间：2023-12-01 01:33:11

(“ donut 派”)是否有最大切片数？我使用了 highchart(“ donut 派”)示例，但无法超过 10 个切片。请注意，内部切片“F”丢失了。下面是示例代码。

http://jsfiddle.net/600phuws/

$(function () {

var colors = Highcharts.getOptions().colors,
    categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera', 'A', 'B', 'C', 'D', 'E', 'F'],
    data = [{
        y: 55.11,
        color: colors[0],
        drilldown: {
            name: 'MSIE versions',
            categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
            data: [10.85, 7.35, 33.06, 2.81],
            color: colors[0]
        }
    }, {
        y: 21.63,
        color: colors[1],
        drilldown: {
            name: 'Firefox versions',
            categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
            data: [0.20, 0.83, 1.58, 13.12, 5.43],
            color: colors[1]
        }
    }, {
        y: 11.94,
        color: colors[2],
        drilldown: {
            name: 'Chrome versions',
            categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
                'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
            data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
            color: colors[2]
        }
    }, {
        y: 7.15,
        color: colors[3],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[3]
        }
    }, {
        y: 2.14,
        color: colors[4],
        drilldown: {
            name: 'Opera versions',
            categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
            data: [ 0.12, 0.37, 1.65],
            color: colors[4]
        }
    }, {
        y: 8.15,
        color: colors[5],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[5]
        }
    }, {
        y: 9.15,
        color: colors[6],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[6]
        }
    }, {
        y: 10.15,
        color: colors[7],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[7]
        }
    }, {
        y: 11.15,
        color: colors[8],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[8]
        }
    }, {
        y: 12.15,
        color: colors[9],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[9]
        }
    }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
            name: 'Safari versions',
            categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
                'Safari 3.1', 'Safari 4.1'],
            data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
            color: colors[10]
        }
    }, 
    ],
    browserData = [],
    versionsData = [],
    i,
    j,
    dataLen = data.length,
    drillDataLen,
    brightness;


// Build the data arrays
for (i = 0; i < dataLen; i += 1) {

    // add browser data
    browserData.push({
        name: categories[i],
        y: data[i].y,
        color: data[i].color
    });

    // add version data
    drillDataLen = data[i].drilldown.data.length;
    for (j = 0; j < drillDataLen; j += 1) {
        brightness = 0.2 - (j / drillDataLen) / 5;
        versionsData.push({
            name: data[i].drilldown.categories[j],
            y: data[i].drilldown.data[j],
            color: Highcharts.Color(data[i].color).brighten(brightness).get()
        });
    }
}

// Create the chart
$('#container').highcharts({
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Browser market share, April, 2011'
    },
    yAxis: {
        title: {
            text: 'Total percent market share'
        }
    },
    plotOptions: {
        pie: {
            shadow: false,
            center: ['50%', '50%']
        }
    },
    tooltip: {
        valueSuffix: '%'
    },
    series: [{
        name: 'Browsers',
        data: browserData,
        size: '60%',
        dataLabels: {
            formatter: function () {
                return this.y > 5 ? this.point.name : null;
            },
            color: 'white',
            distance: -30
        }
    }, {
        name: 'Versions',
        data: versionsData,
        size: '80%',
        innerSize: '60%',
        dataLabels: {
            formatter: function () {
                // display only if larger than 1
                return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%'  : null;
            }
        }
    }]
});
});

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

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

示例 Highcharts - "Donut Pie"

最佳答案

似乎 Highchart 的可用颜色列表有限(只有 10 种)。

另一位用户 ( user2465233 ) 写了 work-around重复这些现有颜色，为图表中尽可能多的切片创建新颜色。

// Workaround for the lack of colors in Highcharts.getOptions().colors
// written by user2465233

var colors = [];
for (var i = 0; i < categories.length; i++) {
    if (i < Highcharts.getOptions().colors.length) {
        colors.push(Highcharts.getOptions().colors[i]);
    } else {
        colors.push(Highcharts.getOptions().colors[i - Highcharts.getOptions().colors.length]);
    }
}

$(function() {

  var colors = Highcharts.getOptions().colors,
    categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera', 'A', 'B', 'C', 'D', 'E', 'F'];

  // Workaround for the lack of colors in Highcharts.getOptions().colors
  var colors = [];
  for (var i = 0; i < categories.length; i++) {
    if (i < Highcharts.getOptions().colors.length) {
      colors.push(Highcharts.getOptions().colors[i]);
    } else {
      colors.push(Highcharts.getOptions().colors[i - Highcharts.getOptions().colors.length]);
    }
  }

  var data = [{
      y: 55.11,
      color: colors[0],
      drilldown: {
        name: 'MSIE versions',
        categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
        data: [10.85, 7.35, 33.06, 2.81],
        color: colors[0]
      }
    }, {
      y: 21.63,
      color: colors[1],
      drilldown: {
        name: 'Firefox versions',
        categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
        data: [0.20, 0.83, 1.58, 13.12, 5.43],
        color: colors[1]
      }
    }, {
      y: 11.94,
      color: colors[2],
      drilldown: {
        name: 'Chrome versions',
        categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
          'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'
        ],
        data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
        color: colors[2]
      }
    }, {
      y: 7.15,
      color: colors[3],
      drilldown: {
        name: 'Safari versions',
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
          'Safari 3.1', 'Safari 4.1'
        ],
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
        color: colors[3]
      }
    }, {
      y: 2.14,
      color: colors[4],
      drilldown: {
        name: 'Opera versions',
        categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
        data: [0.12, 0.37, 1.65],
        color: colors[4]
      }
    }, {
      y: 8.15,
      color: colors[5],
      drilldown: {
        name: 'Safari versions',
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
          'Safari 3.1', 'Safari 4.1'
        ],
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
        color: colors[5]
      }
    }, {
      y: 9.15,
      color: colors[6],
      drilldown: {
        name: 'Safari versions',
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
          'Safari 3.1', 'Safari 4.1'
        ],
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
        color: colors[6]
      }
    }, {
      y: 10.15,
      color: colors[7],
      drilldown: {
        name: 'Safari versions',
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
          'Safari 3.1', 'Safari 4.1'
        ],
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
        color: colors[7]
      }
    }, {
      y: 11.15,
      color: colors[8],
      drilldown: {
        name: 'Safari versions',
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
          'Safari 3.1', 'Safari 4.1'
        ],
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
        color: colors[8]
      }
    }, {
      y: 12.15,
      color: colors[9],
      drilldown: {
        name: 'Safari versions',
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
          'Safari 3.1', 'Safari 4.1'
        ],
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
        color: colors[9]
      }
    }, {
      y: 13.15,
      color: colors[10],
      drilldown: {
        name: 'Safari versions',
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
          'Safari 3.1', 'Safari 4.1'
        ],
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
        color: colors[10]
      }
    }, ],
    browserData = [],
    versionsData = [],
    i,
    j,
    dataLen = data.length,
    drillDataLen,
    brightness;






  // Build the data arrays
  for (i = 0; i < dataLen; i += 1) {

    // add browser data
    browserData.push({
      name: categories[i],
      y: data[i].y,
      color: data[i].color
    });

    // add version data
    drillDataLen = data[i].drilldown.data.length;
    for (j = 0; j < drillDataLen; j += 1) {
      brightness = 0.2 - (j / drillDataLen) / 5;
      versionsData.push({
        name: data[i].drilldown.categories[j],
        y: data[i].drilldown.data[j],
        color: Highcharts.Color(data[i].color).brighten(brightness).get()
      });
    }
  }

  // Create the chart
  $('#container').highcharts({
    chart: {
      type: 'pie'
    },
    title: {
      text: 'Browser market share, April, 2011'
    },
    yAxis: {
      title: {
        text: 'Total percent market share'
      }
    },
    plotOptions: {
      pie: {
        shadow: false,
        center: ['50%', '50%']
      }
    },
    tooltip: {
      valueSuffix: '%'
    },
    series: [{
      name: 'Browsers',
      data: browserData,
      size: '60%',
      dataLabels: {
        formatter: function() {
          return this.y > 5 ? this.point.name : null;
        },
        color: 'white',
        distance: -30
      }
    }, {
      name: 'Versions',
      data: versionsData,
      size: '80%',
      innerSize: '60%',
      dataLabels: {
        formatter: function() {
          // display only if larger than 1
          return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
        }
      }
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>

当然，完整的功劳归于 user2465233 。由于自 2013 年 8 月以来他/她就没有在 StackOverflow 上“见过”，我认为他/她不太可能回来发布答案。

<小时/>

编辑:

这是另一种更短的方法。分配颜色时，我使用 modulo operation将任何切片编号映射到可用的 HighChart 颜色。

var color_index = i>(colors.length-1) ? i%colors.length : i;

给定任何切片编号i，这会生成一个落在可用颜色范围内的color_index。然后，使用该 color_index 引用 HighChart 生成的 colors 数组:

var this_color = colors[color_index];

// add browser data
browserData.push({
    name: categories[i],
    y: data[i].y,
    color: this_color
});

// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
    brightness = 0.2 - (j / drillDataLen) / 5;
    versionsData.push({
        name: data[i].drilldown.categories[j],
        y: data[i].drilldown.data[j],
        color: Highcharts.Color(this_color).brighten(brightness).get()
    });
}

在下面的代码片段中，我添加了一堆额外的切片来演示灵 active :

$(function() {

  var colors = Highcharts.getOptions().colors,
    categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera', 'A', 'B', 'C', 'D', 'E', 'F'],
    data = [{
        y: 55.11,
        color: colors[0],
        drilldown: {
          name: 'MSIE versions',
          categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
          data: [10.85, 7.35, 33.06, 2.81]
        }
      }, {
        y: 21.63,
        color: colors[1],
        drilldown: {
          name: 'Firefox versions',
          categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
          data: [0.20, 0.83, 1.58, 13.12, 5.43]
        }
      }, {
        y: 11.94,
        color: colors[2],
        drilldown: {
          name: 'Chrome versions',
          categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
            'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'
          ],
          data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22]
        }
      }, {
        y: 7.15,
        color: colors[3],
        drilldown: {
          name: 'Safari versions',
          categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
            'Safari 3.1', 'Safari 4.1'
          ],
          data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
        }
      }, {
        y: 2.14,
        color: colors[4],
        drilldown: {
          name: 'Opera versions',
          categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
          data: [0.12, 0.37, 1.65]
        }
      }, {
        y: 8.15,
        color: colors[5],
        drilldown: {
          name: 'Safari versions',
          categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
            'Safari 3.1', 'Safari 4.1'
          ],
          data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
        }
      }, {
        y: 9.15,
        color: colors[6],
        drilldown: {
          name: 'Safari versions',
          categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
            'Safari 3.1', 'Safari 4.1'
          ],
          data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
        }
      }, {
        y: 10.15,
        color: colors[7],
        drilldown: {
          name: 'Safari versions',
          categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
            'Safari 3.1', 'Safari 4.1'
          ],
          data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
        }
      }, {
        y: 11.15,
        color: colors[8],
        drilldown: {
          name: 'Safari versions',
          categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
            'Safari 3.1', 'Safari 4.1'
          ],
          data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
        }
      }, {
        y: 12.15,
        color: colors[9],
        drilldown: {
          name: 'Safari versions',
          categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
            'Safari 3.1', 'Safari 4.1'
          ],
          data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Safari versions',
          categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
            'Safari 3.1', 'Safari 4.1'
          ],
          data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14]
        }
      },

      // ADDITIONAL SLICES BELOW, FOR DEMOSTRATION PURPOSES

      {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      }, {
        y: 13.15,
        color: colors[10],
        drilldown: {
          name: 'Extra',
          categories: ['Extra 1', 'Extra 2', 'Extra 3'],
          data: [4.55, 1.42, 0.23]
        }
      },

      // END ADDITIONAL SLICES


    ],
    browserData = [],
    versionsData = [],
    i,
    j,
    dataLen = data.length,
    drillDataLen,
    brightness;





  // Build the data arrays
  for (i = 0; i < dataLen; i += 1) {

    var color_index = i > (colors.length - 1) ? i % colors.length : i,
      this_color = colors[color_index];

    // add browser data
    browserData.push({
      name: categories[i],
      y: data[i].y,
      color: this_color
    });

    // add version data
    drillDataLen = data[i].drilldown.data.length;
    for (j = 0; j < drillDataLen; j += 1) {
      brightness = 0.2 - (j / drillDataLen) / 5;
      versionsData.push({
        name: data[i].drilldown.categories[j],
        y: data[i].drilldown.data[j],
        color: Highcharts.Color(this_color).brighten(brightness).get()
      });
    }

  }

  // Create the chart
  $('#container').highcharts({
    chart: {
      type: 'pie'
    },
    title: {
      text: 'Browser market share, April, 2011'
    },
    yAxis: {
      title: {
        text: 'Total percent market share'
      }
    },
    plotOptions: {
      pie: {
        shadow: false,
        center: ['50%', '50%']
      }
    },
    tooltip: {
      valueSuffix: '%'
    },
    series: [{
      name: 'Browsers',
      data: browserData,
      size: '60%',
      dataLabels: {
        formatter: function() {
          return this.y > 5 ? this.point.name : null;
        },
        color: 'white',
        distance: -30
      }
    }, {
      name: 'Versions',
      data: versionsData,
      size: '80%',
      innerSize: '60%',
      dataLabels: {
        formatter: function() {
          // display only if larger than 1
          return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
        }
      }
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

关于jquery - Highchart donut 派 - 是否有最大切片数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28442831/

文章推荐： jquery - 如何将毫秒转换为相对时间？

文章推荐： python - Pandas - 恢复许多热编码(虚拟变量)

文章推荐： python - 剥离数据框单元格然后创建列

文章推荐： Python 在 Windows 8.1 64 位上错误地检测到 32 位系统

highcharts - angular2-highcharts Highcharts 导出模块
如何将导出模块包含到 angular2 应用程序中？我尝试将以下脚本添加到 index.html 但没有任何反应。最佳答案从 Angular CLI 1.0-RC.1 和最新的 angular
highcharts - 下载 highchart 时需要 Highchart 水印图像
我正在为 Web 应用程序使用 HighCharts Javascript 库。当我下载 Highchart 时，我需要 Highchart 水印图像。我正在使用普通的 hicgchart 代码。
highcharts - HighChart 工具提示位置可以更改吗？
我是 highcharts 的新手。默认情况下，Highchart 在图表本身内显示工具提示。这是否可以在图表外部显示工具提示，并显示在与内部显示相同的位置。有帮助吗？最佳答案您可以定义自己的 d
highcharts - Highcharts 热图是否可以在一行中使用日期时间轴？
我正在尝试使用日期时间格式的数据创建 highcharts 热图。数据以小时为单位，持续数天。我不希望图表每天都环绕，但希望所有数据都在一条线上。具体来说，它用于显示每小时的云量百分比，因此每个热图
highcharts - Highcharts 导出按钮不显示
我正在用 angular 中的简单图形来验证 highcharts。但是导出按钮不显示。我在 html 页面中添加脚本: 并在图表中添加属性: export :true, navigat
highcharts - highchart 图表重绘方法不刷新图表
我很想知道为什么按钮 2 在这个 example 中不起作用在这个 jsfiddle 示例中，附加到按钮 1 的“更新”方法正在运行，但在我的原始代码中，“更新”也不起作用。它显示错误:“对象# 没
highcharts - Highchart 工具提示的边框样式
我正在尝试在 highcharts 中编辑工具提示的边框。我遇到的问题是我只想显示底部边框。例如，您可以执行以下操作: tooltip: {borderWidth: 10}//但问题是在整个工具提
highcharts - Highcharts 十字线可以显示在面积图顶部吗？
Highcharts的十字线可以显示在面积图的顶部而不是隐藏在其下方吗？这是问题jsfiddle.net/hHjZb/1286/的示例最佳答案更新: Highcharts现在已经实现了the O
highcharts - Highcharts 在导出中添加图例
在将图表导出为PNG时，我试图在饼图上添加图例。这是我的代码: var chart_23_106; $(document).ready(function () { chart_23_106 = ne
highcharts - Highchart - 如何在半圆饼图中创建附加的图像仪表
带三角规的半圆饼如何在图表顶部创建带有三角形仪表的上述半圆饼图。我的车速表可以工作，但不能满足需要。在highchart api中有没有办法使用三角形作为仪表，而不是车速表？谢谢最佳答案这
highcharts - Highcharts -气泡图需要较大的气泡
我们使用的是Highchart气泡图，但是，当气泡x和y在图中位于同一位置且气泡y较小时，将无法看到或单击得很少的气泡。有什么方法可以先绘制较大的气泡，然后在顶部绘制较小的气泡？还是说较小的始终位于
highcharts - 设置图表宽度， Highcharts
是否可以使用百分比设置 Highcharts 的宽度？每当调整页面大小时，图表应具有足够的响应速度以适合页面大小吗？ One Solution 这里的问题是我有3个图表需要并排显示，每次调整页面大小时
highcharts - 更新基本柱 Highcharts
我在更新基本列 Highcharts 时遇到问题。我从服务器返回的 json 数组是: [{"name":"positive","data":[18,35,32,38]},{"name":"nega
highcharts - highchart 中的重叠列
有没有办法创建重叠的列？例如在 this jsFiddle ，蓝色和红色列应如下所示相互重叠，蓝色在后面，红色在前面。澄清一下，我不想要堆叠的列，蓝色和红色列都应该从 xAxis (y=0) 开始
highcharts - Highcharts 自定义图例
如何自定义图例从对此最佳答案查看 Highcharts legend api 选项。您可以使用所需的 css 进一步自定义。使用适当的 svg 图像(背景颜色取自图表本身) legend: {
highcharts - Highchart 图案填充
我正在尝试使用模式作为列范围以允许条形图工作。图案出现但不使用预定义的图案，所以它只是纯蓝色。通常它使用已定义的条纹图案，并在散点图等上完美运行。这是一个片段，展示了我的意思: Highchar
highcharts - Highcharts 范围选择器可以使用非日期线性范围吗？
我正在使用 HighStock JS 库生成一个图表，该图表使用 xAxis 的线性序列(不是时间序列)。我仍然想使用范围选择器来缩放到我的线性系列中的预定范围。这可能吗？例如；说我的 xAxis
highcharts - 单系列向下钻取到多系列 Highcharts
我需要从一个系列向下钻取到多个系列。但是下钻 id 在一个系列上似乎是唯一的，这意味着我无法从单个系列下钻到多个系列；只有一个。我该如何解决这个问题？最佳答案可以使用 chart.addSingl
highcharts - Highcharts 列标签
我制作了一个带有分组和堆叠列的Highcharts图表，就像在这里的示例http://www.highcharts.com/demo/column-stacked-and-grouped一样。该示例显
highcharts - Highchart 滚动条位置
如何在 highcharts/highstock 中将滚动条位置设置为Left？如图表加载时的图像所示，滚动条自动右对齐。有没有办法将它定位到左侧？最佳答案我们可以通过将 min 设置为 0

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - Highchart donut 派 - 是否有最大切片数

编辑: