Линейный график Highcharts не имеет соединительных линий

Question

В моем приложении есть диаграмма Highcharts, и она поддерживает возможности детализации. Char - это линейный график. Пример кода можно увидеть ниже:

Highcharts.chart('container-main-bar', {
  chart: {
      type: 'line',
      events: {
          drilldown: function(e) {


          },
          drillup: function (e) {


          }
      },
  },
  exporting: { enabled: true },
  title: {
      text: 'Car Sales'
  },
  xAxis: {
      type: 'category',
      labels: {
          formatter () {
              return `<span style="color: #626262">${this.value}</span>`
          }
      }
  },
  yAxis: {
      title: {
          text: 'Sales'
      },
      allowDecimals: false,
      labels: {
          formatter () {
              return `<span style="color: #626262">${this.value}</span>`
          }
      }

  },
  legend: {
      enabled: true
  },
  plotOptions: {
       series: {
           borderWidth: 0,
           dataLabels: {
               enabled: true,
               format: '{point.y}'
           },
       },
  },

  tooltip: {
      headerFormat: '<span style="font-size:11px">Sales as at</span><br>',
      pointFormat: '<span style="color:{point.color}">{point.date}</span>: <b>{point.y}</b> <br/>'
  },

  "series": [
      {
          "name": "Australia",
          "colorByPoint": true,
          "data": [
              {
                  "name": 2018,
                  "y": 20,
                  "color": '#ff910c',
                  "drilldown": 'Year5',
                  "date": 2018-09-10
              },
              {
                  "name": 2017,
                  "y": 40,
                  "color": '#ff910c',
                  "drilldown": 'Year4',
                  "date": 2018-09-10
              },
              {
                  "name": 2016,
                  "y": 50,
                  "color": '#ff910c',
                  "drilldown": 'Year3',
                  "date": 2018-09-10
              },
              {
                  "name": 2015,
                  "y": 30,
                  "color": '#ff910c',
                  "drilldown": 'Year2',
                  "date": 2018-09-10
              },
              {
                  "name": 2014,
                  "y": 20,
                  "color": '#ff910c',
                  "drilldown": 'Year1',
                  "date": 2018-09-10
              },
              {
                  "name": 2013,
                  "y": 20,
                  "color": '#ff910c',
                  "drilldown": 'Year0',
                  "date": 2018-09-10
              }
          ]
      },
      {
          "name": "Sri Lanka",
          "colorByPoint": true,
          "data": [
              {
                  "name": 2018,
                  "y": 30,
                  "color": '#ff910c',
                  "drilldown": 'Year5',
                  "date": 2018-09-10
              },
              {
                  "name": 2017,
                  "y": 40,
                  "color": '#ff910c',
                  "drilldown": 'Year4',
                  "date": 2018-09-10
              },
              {
                  "name": 2016,
                  "y": 20,
                  "color": '#ff910c',
                  "drilldown": 'Year3',
                  "date": 2018-09-10
              },
              {
                  "name": 2015,
                  "y": 20,
                  "color": '#ff910c',
                  "drilldown": 'Year2',
                  "date": 2018-09-10
              },
              {
                  "name": 2014,
                  "y":50,
                  "color": '#ff910c',
                  "drilldown": 'Year1',
                  "date": 2018-09-10
              },
              {
                  "name": 2013,
                  "y": 60,
                  "color": '#ff910c',
                  "drilldown": 'Year0',
                  "date": 2018-09-10
              }
          ]
      },
      {
          "name": "America",
          "colorByPoint": true,
          "data": [
              {
                  "name": 2018,
                  "y": 20,
                  "color": '#ff910c',
                  "drilldown": 'Year5',
                  "date": 2018-09-10
              },
              {
                  "name": 2017,
                  "y": 40,
                  "color": '#ff910c',
                  "drilldown": 'Year4',
                  "date": 2018-09-10
              },
              {
                  "name": 2016,
                  "y": 60,
                  "color": '#ff910c',
                  "drilldown": 'Year3',
                  "date": 2018-09-10
              },
              {
                  "name": 2015,
                  "y": 30,
                  "color": '#ff910c',
                  "drilldown": 'Year2',
                  "date": 2018-09-10
              },
              {
                  "name": 2014,
                  "y":50,
                  "color": '#ff910c',
                  "drilldown": 'Year1',
                  "date": 2018-09-10
              },
              {
                  "name": 2013,
                  "y": 60,
                  "color": '#ff910c',
                  "drilldown": 'Year0',
                  "date": 2018-09-10
              }
          ]
      },
      {
          "name": "UK",
          "colorByPoint": true,
          "data": [
              {
                  "name": 2018,
                  "y": 10,
                  "color": '#ff910c',
                  "drilldown": 'Year5',
                  "date": 2018-09-10
              },
              {
                  "name": 2017,
                  "y": 50,
                  "color": '#ff910c',
                  "drilldown": 'Year4',
                  "date": 2018-09-10
              },
              {
                  "name": 2016,
                  "y": 60,
                  "color": '#ff910c',
                  "drilldown": 'Year3',
                  "date": 2018-09-10
              },
              {
                  "name": 2015,
                  "y": 20,
                  "color": '#ff910c',
                  "drilldown": 'Year2',
                  "date": 2018-09-10
              },
              {
                  "name": 2014,
                  "y":80,
                  "color": '#ff910c',
                  "drilldown": 'Year1',
                  "date": 2018-09-10
              },
              {
                  "name": 2013,
                  "y": 60,
                  "color": '#ff910c',
                  "drilldown": 'Year0',
                  "date": 2018-09-10
              }
          ]
      }
  ],
  "drilldown": {
      activeAxisLabelStyle: {
          textDecoration: 'none',
      },
      activeDataLabelStyle: {
          textDecoration: 'none',
      },
      drillUpButton: {
          relativeTo: 'spacingBox',
          position: {
              x: -30,
              y: 0
          },
          theme: {
              fill: 'white',
              'stroke-width': 1,
              stroke: 'silver',
              r: 0,
              states: {
                  hover: {
                      fill: '#a4edba'
                  },
                  select: {
                      stroke: '#039',
                      fill: '#a4edba'
                  }
              }
          }
      },
      "series": [
          {
              "name": 'Sales by Location',
              "id": 'Year0',
              "data": [
                  {
                      "name": "Adelaide",
                      "y": 3,
                      "date": 2018-09-10,
                      "drilldown": true,
                      "year": 2018
                  },
                  {
                      "name": "Canberra",
                      "y": 5,
                      "date": 2018-08-31,
                      "drilldown": true,
                      "year": 2018
                  },
                  {
                      "name": "Hobart",
                      "y": 2,
                      "date": 2018-07-10,
                      "drilldown": true,
                      "year": 2018
                  },
                  {
                      "name": "Sydney",
                      "y": 5,
                      "date": 2018-06-30,
                      "drilldown": true,
                      "year": 2018
                  },
              ]
          }
      ]
  }
});

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container-main-bar"></div>

Поскольку это линейный график, должны быть линии, соединяющие каждую серию. Но на моем графике я не вижу этих линий, соединяющих точки. Есть ли что-то еще, что нам нужно сделать, чтобы получить линии на графике.

Answer 1

Ваша проблема вызвана свойством colorByPoint, вы не должны использовать эту опцию в серии строк.

Highcharts.chart('container', {
    chart: {
        type: 'line',
        events: {
            drilldown: function(e) {


            },
            drillup: function(e) {


            }
        },
    },
    exporting: {
        enabled: true
    },
    title: {
        text: 'Car Sales'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'Sales'
        },
        allowDecimals: false

    },
    legend: {
        enabled: true
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y}'
            },
        },
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">Sales as at</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.date}</span>: <b>{point.y}</b> <br/>'
    },

    "series": [{
        "name": "Australia",
        //"colorByPoint": true,
        "data": [{
            "name": 2018,
            "y": 20,
            "color": '#ff910c',
            "drilldown": 'Year5',
            "date": 2018 - 09 - 10
        },
                 {
                     "name": 2017,
                     "y": 40,
                     "color": '#ff910c',
                     "drilldown": 'Year4',
                     "date": 2018 - 09 - 10
                 },
                 {
                     "name": 2016,
                     "y": 50,
                     "color": '#ff910c',
                     "drilldown": 'Year3',
                     "date": 2018 - 09 - 10
                 },
                 {
                     "name": 2015,
                     "y": 30,
                     "color": '#ff910c',
                     "drilldown": 'Year2',
                     "date": 2018 - 09 - 10
                 },
                 {
                     "name": 2014,
                     "y": 20,
                     "color": '#ff910c',
                     "drilldown": 'Year1',
                     "date": 2018 - 09 - 10
                 },
                 {
                     "name": 2013,
                     "y": 20,
                     "color": '#ff910c',
                     "drilldown": 'Year0',
                     "date": 2018 - 09 - 10
                 }
                ]
    },
               {
                   "name": "Sri Lanka",
                   //"colorByPoint": true,
                   "data": [{
                       "name": 2018,
                       "y": 30,
                       "color": '#ff910c',
                       "drilldown": 'Year5',
                       "date": 2018 - 09 - 10
                   },
                            {
                                "name": 2017,
                                "y": 40,
                                "color": '#ff910c',
                                "drilldown": 'Year4',
                                "date": 2018 - 09 - 10
                            },
                            {
                                "name": 2016,
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year3',
                                "date": 2018 - 09 - 10
                            },
                            {
                                "name": 2015,
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year2',
                                "date": 2018 - 09 - 10
                            },
                            {
                                "name": 2014,
                                "y": 50,
                                "color": '#ff910c',
                                "drilldown": 'Year1',
                                "date": 2018 - 09 - 10
                            },
                            {
                                "name": 2013,
                                "y": 60,
                                "color": '#ff910c',
                                "drilldown": 'Year0',
                                "date": 2018 - 09 - 10
                            }
                           ]
               },
               {
                   "name": "America",
                   //"colorByPoint": true,
                   "data": [{
                       "name": 2018,
                       "y": 20,
                       "color": '#ff910c',
                       "drilldown": 'Year5',
                       "date": 2018 - 09 - 10
                   },
                            {
                                "name": 2017,
                                "y": 40,
                                "color": '#ff910c',
                                "drilldown": 'Year4',
                                "date": 2018 - 09 - 10
                            },
                            {
                                "name": 2016,
                                "y": 60,
                                "color": '#ff910c',
                                "drilldown": 'Year3',
                                "date": 2018 - 09 - 10
                            },
                            {
                                "name": 2015,
                                "y": 30,
                                "color": '#ff910c',
                                "drilldown": 'Year2',
                                "date": 2018 - 09 - 10
                            },
                            {
                                "name": 2014,
                                "y": 50,
                                "color": '#ff910c',
                                "drilldown": 'Year1',
                                "date": 2018 - 09 - 10
                            },
                            {
                                "name": 2013,
                                "y": 60,
                                "color": '#ff910c',
                                "drilldown": 'Year0',
                                "date": 2018 - 09 - 10
                            }
                           ]
               },
               {
                   "name": "UK",
                   //"colorByPoint": true,
                   "data": [{
                       "name": 2018,
                       "y": 10,
                       "color": '#ff910c',
                       "drilldown": 'Year5',
                       "date": 2018 - 09 - 10
                   },
                            {
                                "name": 2017,
                                "y": 50,
                                "color": '#ff910c',
                                "drilldown": 'Year4',
                                "date": 2018 - 09 - 10
                            },
                            {
                                "name": 2016,
                                "y": 60,
                                "color": '#ff910c',
                                "drilldown": 'Year3',
                                "date": 2018 - 09 - 10
                            },
                            {
                                "name": 2015,
                                "y": 20,
                                "color": '#ff910c',
                                "drilldown": 'Year2',
                                "date": 2018 - 09 - 10
                            },
                            {
                                "name": 2014,
                                "y": 80,
                                "color": '#ff910c',
                                "drilldown": 'Year1',
                                "date": 2018 - 09 - 10
                            },
                            {
                                "name": 2013,
                                "y": 60,
                                "color": '#ff910c',
                                "drilldown": 'Year0',
                                "date": 2018 - 09 - 10
                            }
                           ]
               }
              ],
    "drilldown": {
        activeAxisLabelStyle: {
            textDecoration: 'none',
        },
        activeDataLabelStyle: {
            textDecoration: 'none',
        },
        drillUpButton: {
            relativeTo: 'spacingBox',
            position: {
                x: -30,
                y: 0
            },
            theme: {
                fill: 'white',
                'stroke-width': 1,
                stroke: 'silver',
                r: 0,
                states: {
                    hover: {
                        fill: '#a4edba'
                    },
                    select: {
                        stroke: '#039',
                        fill: '#a4edba'
                    }
                }
            }
        },
        "series": [{
            "name": 'Sales by Location',
            "id": 'Year0',
            "data": [{
                "name": "Adelaide",
                "y": 3,
                "date": 2018 - 09 - 10,
                "drilldown": true,
                "year": 2018
            },
                     {
                         "name": "Canberra",
                         "y": 5,
                         "date": 2018 - 08 - 31,
                         "drilldown": true,
                         "year": 2018
                     },
                     {
                         "name": "Hobart",
                         "y": 2,
                         "date": 2018 - 07 - 10,
                         "drilldown": true,
                         "year": 2018
                     },
                     {
                         "name": "Sydney",
                         "y": 5,
                         "date": 2018 - 06 - 30,
                         "drilldown": true,
                         "year": 2018
                     },
                    ]
        }]
    }
});

Демонстрационная версия: http://jsfiddle.net/BlackLabel/gtcod176/