【问题标题】:Is there any way to define the indivdual dataLabels connector width in a pie chart有没有办法在饼图中定义单个数据标签连接器宽度
【发布时间】:2018-07-18 13:47:19
【问题描述】:

根据Highcharts documentation,可以从各个点属性中定义connectorColor

我正在寻找一种方法来做同样的事情,但对于 connectorWidth 属性,因为我希望我的连接器根据它们所连接的 dataLabels 具有不同的宽度和样式。我该怎么做?

【问题讨论】:

    标签: css highcharts pie-chart


    【解决方案1】:

    是的,如果您使用 Highcharts 的样式模式。请参阅此处的示例:http://jsfiddle.net/brightmatrix/u4mhpg9o/

    我发现,如果您将本地样式应用于分配给数据标签的特定颜色(或您创建的任何自定义样式),您可以更改连接器宽度。在我的示例中,我更改了图表样式表(鳄梨)中饼图 #7 的连接器宽度:

    /* style defined in the demo for all connectors */
    .highcharts-pie-series .highcharts-data-label-connector {
        stroke: silver;
        stroke-dasharray: 2, 2;
        stroke-width: 2px;
    }
    /* local style just for connector #7 */
    .highcharts-data-label-connector + .highcharts-color-7 {
        stroke-width: 20px;
    }
    

    结果如下:

    您可以通过检查网络浏览器中的代码来确定哪个样式名称分配给哪个饼图。

    现在,如果您使用样式模式,则只能在系列级别更改连接器宽度,而不能更改单个数据点。

    希望这些信息对您有所帮助。

    【讨论】:

    • 感谢您的解释。实际上,我正在尝试使用样式模式来做到这一点。这个想法是让连接器宽度根据传递给饼图的数据动态变化。如果这有意义吗?同样,我可以以某种方式根据数据动态更改 dataLabels 和一些连接器属性。抱歉,如果我不清楚我的问题中的那个特定方面。
    • @xuv 我很好奇你为什么要这么做。更改连接器属性对向用户显示数据有什么意义?这如何增强或补充您已经在饼图中展示的内容?我担心的是,对于某人来说,这将是太多的“图表噪音”。在不了解您的其他要求的情况下,我建议您考虑使用不同的颜色、切片馅饼(请参阅此处的 Chrome 切片:highcharts.com/demo/pie-basic)或可变半径馅饼(highcharts.com/demo/variable-radius-pie)。
    • 我同意,在这种情况下没有多大意义。只是我尝试使用 highcharts 饼图组件实现的设计需要显示额外的数据信息(如果您愿意,可以显示 Z 轴数据),并且由于 Highcharts 提供了重新设计和重新调整其任何元素的灵活性,所以我是寻找这样的功能。但我明白为什么它不可用。我们通过使用 Highcharts 提供的自定义绘制函数将这些自定义线条添加到图表中解决了这个问题。
    猜你喜欢
    • 2011-07-01
    • 2012-03-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-11-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多